Modify CSS rules with JavaScript or jQuery?

Question

Is it possible to edit/modify existing css rules using javascript or jquery? For instance, the stylesheet has this class:

.red {
    color: red;
}

And I have 10 elements using the class.

What I would love to do, is to edit the class like this:

.red {
    color: blue;
}

So that it will also effect the future instances of the same class. (11th, 12th, 13th elements and so on).

Answer 1

This is how you change the CSS rule using JavaScript.

 var ss = document.styleSheets; var m = document.getElementById('modifiedRule'); for (i = 0; i < ss.length; i++) { var rules = ss[i]; for (j = 0; j < rules.cssRules.length; j++) { var r = rules.cssRules[j]; if (r.selectorText == ".red") { m.innerHTML = "<br />Old rule: " + r.cssText; r.style.color = "blue"; m.innerHTML += "<br />Modified rule: " + r.cssText; } } } 

 .red { color: red; } 

 <div class="red">Text</div> <div class="red">Text</div> <div class="red">Text</div> <div class="red">Text</div> <div class="red">Text</div> <div class="red">Text</div> <div class="red">Text</div> <div id="modifiedRule"></div> 

Answer 2

Javascript provides the document.stylesheets collection which provides a list of CSSStyleSheet objects. You can traverse this collection to find any specific css rule you are interested in and modify its rules.

However, as mentioned before me this is probably not the correct approach for what you are trying to achieve. It can be a bit browser depenedant and just feels hacky.

You would be better off having 2 separate rules

.red { color :red }
.blue { color : blue }

Inside your javascript maintain a variable that holds the current default class for your elements, ie. current_class = 'blue'. When you create an element simply .addClass(current_class). When you want to change all the elements, .toggleClass(current_class, new_class).

Answer 3

Seems to me you could just do this:

var reds = $('.red');
var index = 1;
reds.each(function(){
    $(this).css('color', index > 10 ? 'blue' : 'red');
    index++;
})

Answer 4

What you're asking seems to me like an abuse of CSS (regardless of whether or not you find a workable solution to you specific question).

I'd approach this as follows:

.red .myElementClass{ /*or perhaps .red>.myElementClass*/
    color:red;
}
.blue .myElementClass{ /*or perhaps .blue>.myElementClass*/
    color:blue;
}

---

<div id="outer" class="red">
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
    <div class="myElementClass">foo</div>
</div>

Now you can add as many as you want, and to change all of their colors, just swap the class of the div#outer to blue .

Answer 5

I believe jQuery .css() is what you are looking for.

$('.red').css('color', 'blue');

http://api.jquery.com/css/