Add CSS with Jquery to dynamic elements

Question

Someone can help me with the following.

I need to add style to dynamic HTML elements I add with Jquery, but I can not give it to them directly in a stylesheet, since the values of the attributes that I want to change, are different also depending on the element I add.

Simplifying things, I need to styles from Jquery to HTML elements that will add more later.

I appreciate some help.

Afshan Shujat · Accepted Answer · 2016-04-30 02:43:40Z

1

If you are adding element dynamically, then at the time of element creation you can add the css on the element like.

$('<p id="createdParagraph"/>')
    .appendTo(document.body)
    .css("color": "white",
        "background-color": "#98bf21",
        "font-family": "Arial",
        "font-size": "20px",
        "padding": "5px");

or

$('p').append('<span class=your_class_name>)

If you want to use lot of properties in different cases then you can create all the possible classes in your stylesheet and you can add/remove those classes using jquery dynamically like -

$("p").addClass('class1');
$("p").removeClass('class1');

Hope this will help you.

edited Apr 30, 2016 at 2:43

answered Apr 30, 2016 at 2:27

Afshan Shujat

5514 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Carlos Andres Guzman Arreola Over a year ago

Hi, thanks for your interest, unfortunately, this method does not help me because the CSS assigns it to the container where you are adding html, while I needed to give it to content that was adding however the code served me, although tube that change a bit the code you had to use it so as explicastes, thanks.

DarkBee · Accepted Answer · 2025-11-22 11:35:56Z

0

You can use jQuery’s css() method to add new CSS properties to an item or change the values of existing properties dynamically using jQuery.

HTML code:

  <p>This is a paragraph.</p>

JQuery code:

  $(document).ready(function(){
    $("p").css({
      "font-size": "20px",
      "text-align": "center",
      "padding": "40px"
    });
  });

edited yesterday

DarkBee

14.5k9 gold badges83 silver badges132 bronze badges

answered Feb 1, 2021 at 18:50

thomas

6319 silver badges7 bronze badges

Collectives™ on Stack Overflow

Add CSS with Jquery to dynamic elements

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related