3

With my question I suspect a lot of people may get confused between dynamic styling (what you can achieve by jQuery's .css() function and dynamic CSS rules. The first is where it only changes the styles of existing elements matching the selector. But what I am after is adjusting the rule so any new elements matching the selector will also use that (dynamic) rule.

As an example let's take a set of DIVs with class "pane".

I can change the background color of existing panes using $(".pane").css({"background-color": "#00f"});

But if I then add a new pane $("body").append("<div class='pane'></div>"); it won't use this new style because it isn't a rule.

I don't understand why adding/changing CSS rules isn't the default behaviour? Was this ever discussed by a W3C working group to anyone's knowledge?

Does anyone know if it is possible to add or change CSS rules dynamically client side (ie without communicating with the server)?

shanef
  • 33
  • 2
  • you might be able to use the `addClass()`, `removeClass()` [functions](http://api.jquery.com/addclass/)? css classes would need to exist already.. unless you were using something to dynamically create and link a .css file? – Jake May 28 '14 at 03:34
  • @C-link: You didn’t understand the question correctly, that’s not what was asked for. – CBroe May 28 '14 at 03:40
  • I hardly think this question is a duplicate of the one you marked Arun P Johny. The answers may be similar but not even close to as good as Milind's below. – shanef May 28 '14 at 03:48
  • Another way of @Milind Anantwar's answer, You can do simple like that. `$("
    ").appendTo('body').css('background-color', '#00f');`     – Arkar Aung May 28 '14 at 03:59
  • Except that answer in my opinion is an example of poor coding practice Arkar as you are applying specific styles and not rules. You are losing the power of CSS (and its rules)... ie. keeping the styling definition and the DOM structure separate. – shanef May 28 '14 at 04:11
  • So Why don't you define simply rules for ".pane" in stylesheet ?? It will apply automatically when you append ".pane". For coding practice, Using `addClass()` and `removeClass()` to modify or overwrite existing rule is better than appending style tag. – Arkar Aung May 28 '14 at 04:23
  • So I should define a class for every single color (1.6+ million classes)? Of course not, that is not practical. In some cases toggling classes to adjust styles makes sense but not in situations when you want to give your users almost limitless options and flexibility (customisation). And I also don't want the overhead of managing those classes (ie states) against DOM elements just to maintain the new CSS rule I want. Being able to declare CSS rules dynamically for customisation purposes is of huge benefit with large Ajax based systems (eg SaaS products). – shanef May 28 '14 at 04:38

1 Answers1

3

You can append the css in style tag to page head using:

$("<style>").prop("type","text/css").html(".pane{background-color: #00f;}").appendTo("head");

or

$("head").append($("<style>").prop("type","text/css").html(".pane{background-color: #00f;}"))
Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125