jQuery CSS: Dynamically change attributes of a class

Question

I want to change the attribute of a class on which all element that use the class for the rest of the web application life (from start of use until the user exits the web application) will be affected.

html:

<p class="myClass">     What? </p> <p class="myClass">     Now? </p> 

css:

.myClass{     background-color: #ffff00;     } 

js:

$(".myClass").css("background-color", "#00FFFF"); $("p").last().after("<div class='myClass'>Now!</div>"); 

Here is a sample

What I want to achieve from the sample is that all subsequent dynamically added myClass will have the new attribute. From the jsFiddle, you'll see that the next added element doesn't have the new attribute.

MORE:

I'm just using the color for a basis, I will implement this in larger scale, what I want to accomplish is to dynamically change the attributes of a class that will be used for the entire web app life cycle.

Answer 1

I just stumbled upon this question, and thought I would chime in, even though it is almost a year old...

You actually can modify the css rules dynamically at runtime, just like any other DOM element. I don't think jQuery supports it, so you would need to use the native DOM elements directly.

You can assign titles to stylesheets to make them easier to locate in the DOM tree, but with a little forethought, it's usually not too difficult to find the rules you want. Here is a quick example from a jsfiddle based on your example.

function getStyleRule(name) {   for(var i=0; i<document.styleSheets.length; i++) {     var ix, sheet = document.styleSheets[i];     for (ix=0; ix<sheet.cssRules.length; ix++) {         if (sheet.cssRules[ix].selectorText === name)             return sheet.cssRules[ix].style;     }   } return null; }  var rule = getStyleRule('.myClass'); rule.backgroundColor = '#0ff';  $("p").last().after("<div class='myClass'>Now!</div>"); 

Here is a fiddle that shows your example, updated to modify the css rule itself: http://jsfiddle.net/93wGJ/5/

For more info on the DOM for stylesheets, have a look at http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html

Answer 2

Using the css() method changes the inline styles on already existing elements, and you can't use that to change the styles on future elements. A workaround (that I don't like very much) would be to insert a style tag:

$( "<style>.myClass {background-color : #00FFFF}</style>" ).appendTo( "head" ) $("p").last().after("<div class='myClass'>Now!</div>"); 

FIDDLE