javascript change css declaration

Question

I am a beginner with jQuery and understand the use of addClass(), but I often have wondered, instead of adding a class to an element, how about changing what the class means?

so for example I have a table row:

<tr>
    <td class="somethingIMayNotWantToSee">A</td>
    <td >B</td>
    <td >C</td>
</tr>

I realize the common way to do this is .css('display','none');.. but instead is it possible, feasible even to just change

.somethingIMayNotWantToSee{ display:block; }

to

.somethingIMayNotWantToSee{ display:none; }

or is that already set in the system when the page loads.

see http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript — Arun P Johny, Dec 21 '13 at 04:40
If this is about element states (visible vs hidden row), use `data-` attributes instead of classes. Read this [post](http://toddmotto.com/stop-toggling-classes-with-js-use-behaviour-driven-dom-manipulation-with-data-states/). — Šime Vidas, Dec 21 '13 at 04:42
possible duplicate of [modify a css rule object with javascript](http://stackoverflow.com/questions/13528512/modify-a-css-rule-object-with-javascript) — epascarello, Dec 21 '13 at 04:45
@ArunPJohny This isn't a good approach as you've said yourself. Why are you creating demos for it? We shouldn't just blindly respond to OP's request but instead provide advice based on good practices. — Šime Vidas, Dec 21 '13 at 04:47
adding a new style element with a rule overriding the previous one isn't such a bad approach. It should work in theory. Just selecting everything of that class and changing the inline style via $().css() is a better plan though, I think, for predictability between browsers. — JAL, Dec 21 '13 at 04:50
@ŠimeVidas we have given the advice not to do it.... but knowing something can be done and how is different from actually using it... there best practices matter... but still the OP can go through the code an learn how it is possible — Arun P Johny, Dec 21 '13 at 04:51
I have to say I appreciate Sime Vidas' clear example actually. Understanding now the option available allows me to compare the two. I probably will NOT use this in my code but it actually helps clear the difference between modifying the css itself vs. modifying the element(s)' dependency on the css. — Samuel Fullman, Dec 21 '13 at 04:52
@JAL It unnecessarily adds new style sheets to the page. It's a bad approach. If you have an element that has multiple states, the standard approach is to toggle its attributes (either one of his classes or, as I suggested, one of its `data-` attributes). — Šime Vidas, Dec 21 '13 at 04:56
I agree it's not a good practice. It's interesting to know how it might be done, though. — JAL, Dec 21 '13 at 05:03
possible duplicate of [How can I change the css class rules using jQuery?](http://stackoverflow.com/questions/622122/how-can-i-change-the-css-class-rules-using-jquery) — Felix Kling, Dec 21 '13 at 05:10

score 1 · Answer 1 · answered Dec 21 '13 at 04:47

It is technically possible to use javascript to edit the style properties of any style declaration on the page, unfortunately there has untill recently been very little compatibility between the differing implementations of where, when and how one does this.

If you truly wish to change the CSS of the page in such a way, I recommend you visit the MDN page https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets that contains information on how to use javascript to manipulate the CSSOM

score 0 · Answer 2 · edited May 23 '17 at 12:03

0

Use document.styleSheets may help you solve this problem. It possible HERE.

edited May 23 '17 at 12:03

Community

1
1

answered Dec 21 '13 at 04:47

Ringo

3,795
3
22
37

user3114934 · Answer 3 · 2013-12-21T05:58:05.457

The CSSStyleSheet.insertRule() method inserts a new/append style rule into the current style sheet. We can add/append new rules to our predefined class using the insertRule and addRule (as reqd.) methods as is shown below:

function addCSSRule(sheet, selector, rules,index) {
    if(sheet.insertRule) {
        sheet.insertRule(selector + "{" + rules + "}", index);
    }
    else {
        sheet.addRule(selector, rules, index);
    }
    //if -else is used because some browsers don't support insertRule 
    //and some don't support addRule
}

// we can use it as

addCSSRule(document.styleSheets[0], "header", "float: left",-1);

http://happycodng.blogspot.in/2013/12/add-rule-and-insert-rule-methods-css.html

javascript change css declaration

3 Answers3