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).

http://stackoverflow.com/questions/13075920/add-css-rule-via-jquery-for-future-created-elements — rocky, Nov 23 '14 at 01:06
Is requirement to edit `style` element text ? , `link` element `href` stylesheet ? — guest271314, Nov 23 '14 at 01:07
@rocky that solution just lets me add new styles using the -- does not really answer my question (I need to modify existing rules) — Mia, Nov 23 '14 at 01:08
The later a rule is specified the bigger priority it has. So you can modify (overwrite) rules. Isn't that enough? — rocky, Nov 23 '14 at 01:10
than it will only be an expanding group of rules, I will possibly only edit the opacity of things to 0 and 1 over time — Mia, Nov 23 '14 at 01:13
Is requirement to edit text of `style` element ? , replacing `.red {color:red};` with `.red{color:blue};` ? Or , only the first 10 elements having `class` `.red` ? If possible , can post `html` , `css` , `js` ? Thanks — guest271314, Nov 23 '14 at 01:13
You'll realize that using visual appearances as class names will lead to confusion. `.red` with blue coloured text? That's a misnomer of sorts. I suggest using class names that reflect the functional role, not the outward appearance, of the element(s) of interest. — Terry, Nov 23 '14 at 01:21

Weafs.py · Answer 1 · 2014-11-23T01:43:06.290

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>

score 1 · Answer 2 · answered Nov 23 '14 at 01:46

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).

score 0 · Answer 3 · answered Jun 09 '15 at 06:44

0

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++;
})

answered Jun 09 '15 at 06:44

omikes

8,064
8
37
50

very processor intensive. css is simple. – Mia Jun 11 '15 at 12:55

spender · Answer 4 · 2014-11-23T01:19:56.420

-1

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.

edited Nov 23 '14 at 01:19

answered Nov 23 '14 at 01:14

spender

117,338
33
229
351

2

@Zettam: Despite the downvotes, I maintain that you are falling into the [XY problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) and you should rethink your strategy of changing CSS rules during runtime. It's not how CSS was designed to be used. Save some time and solve your problem in a more conventional fashion. – spender Nov 23 '14 at 01:36
I was about to answer myself and suggest the same. Use two classes and swap them in JS. jQuery make this easy: `$('#outer').toggleClass('red', 'blue');` – Sukima Nov 23 '14 at 01:44

score -3 · Answer 5 · answered Nov 23 '14 at 01:13

-3

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

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

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

answered Nov 23 '14 at 01:13

RickTakes

1,197
1
9
14

that's not what I'm looking for as it's just a selector (does not effect future copies of the item). – Mia Nov 23 '14 at 01:14
Zettlam: This is indeed a correct answer to your question. However your response clearly shows that the question was incomplete. Therefore this is most certainly an [XY problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) like @spender explained above. – Sukima Nov 23 '14 at 01:46

Modify CSS rules with JavaScript or jQuery?

5 Answers5