modify a css rule object with javascript

Question

Possible Duplicate:
Changing a CSS rule-set from Javascript

I was wondering if there is any possibility to modify Css stylesheet declarations without going for inline styling.

Here is a quick example :

<style>
    .box {color:green;}
    .box:hover {color:blue;}
</style>

<div class="box">TEXT</div>

That gives a blue written box that turns green written on hover.

If I give inline styling for the color, the hover behavior will be lost :

<div class="box" style="color:red;">TEXT</box>

That gives a red written box, no matter what.

So my question is, how can one access and modify the css declaration object rather than overwriting styles with inline ones.

Thanks,

Asad Saeeduddin · Accepted Answer · 2014-07-11T17:47:13.790

44

You could use the cssRules on the DOM stylesheet object corresponding to your original stylesheet to modify your rule.

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style.color = 'red';

Note that IE uses rules instead of cssRules.

edited Jul 11 '14 at 17:47

answered Nov 23 '12 at 11:51

Asad Saeeduddin

Precisely what i was looking for. Thanks for the hint. – Dave Loepr Nov 23 '12 at 11:59
2

This is good. I'm wondering if I can target specific rule sets without referencing its index location. – Musixauce3000 Aug 13 '16 at 20:34
@Musixauce3000 What *do* you want to target the rule sets by? – Asad Saeeduddin Aug 14 '16 at 05:28
@AsadSaeeduddin Well, maybe by the label. Like div, .wrapper or #output . For example: `document.stylesheet[0].cssRules[".mockButton"].style.color = '#FFF';` – Musixauce3000 Aug 14 '16 at 17:14
3

@Musixauce3000 Well the `rules` variable in my snippet is a [`CSSRuleList`](https://developer.mozilla.org/en-US/docs/Web/API/CSSRuleList), essentially an array of [`CSSRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSRule) objects. Assuming you're only looking for style declaration rules, you could filter `rules` to isolate only [`CSSStyleRule`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleRule) instances, then filter those to find the ones where the `selectorText` property matches some string (or regex). – Asad Saeeduddin Aug 15 '16 at 01:34

score 6 · Answer 2 · edited Apr 01 '20 at 07:50

6

Just define your classes, and assign/remove classes to HTML elements with javascript.

Directly assigning style to an element, has highest priority, It will override all other CSS rules.

EDIT: you may want to use cssText property, see example here cssText property

edited Apr 01 '20 at 07:50

CraZ

answered Nov 23 '12 at 11:50

Kemal Dağ

For this I would need to know what the modify style would look like in advance. What if the base style is based on user input ? For your solution, i would need to create a new css class on the fly, which is just a different way to see the access stylesheet problem – Dave Loepr Nov 23 '12 at 11:54
I updated the answer a bit, check for cssText property – Kemal Dağ Nov 23 '12 at 11:55
Thanks but still based on javascript/inline styling edit: fast misread csstext is part of the editing stylesheet solution – Dave Loepr Nov 23 '12 at 11:57
I am not sure, how you avoid JavaScript, but you should check @Asad's answer too, seems more elegant than mine. – Kemal Dağ Nov 23 '12 at 11:59

2 Answers2