Is it possible to set the cssText property of a cssRule

Question

I'm trying to edit the cssText property of a cssRule. I've seen it done often:

• Why does altering the height in cssText remove the background: none?
• Relocate my images at startup

Usually its done using : cssText.replace( ... ).

It seems to work for everybody except me. Can someone please explain me why the following will not work :

    var cssText = document.styleSheets[1].cssRules[0].cssText;
    document.styleSheets[1].cssRules[0].cssText = cssText.replace( "red", "yellow" );

Fiddle is here: http://jsfiddle.net/KbkFH/3/

Mcintosh

Answer 1

You almost had it. You were just missing the style

$( document ).ready(
function() {
    //.style was missing
    var cssText = document.styleSheets[1].cssRules[0].style.cssText;
    document.styleSheets[1].cssRules[0].style.cssText = cssText.replace( "red", "yellow" );
    }
);

Updated fiddle: http://jsfiddle.net/KbkFH/6/

NOTE: if the rule included a class name of redesign it would replace the class name to be yellowesign which might not be what you want. Just be careful when using replace without parsing the styles or targetting a specific style.

Senator

Answer 2

Actually your code is working as aspected.

CSSRule.cssText: cssText returns the actual text of the style rule

Check this Using dynamic styling information

Delisle

Answer 3

Javascript DOM style

  var div = document.querySelectorAll("div");
 
  div[0].style.cssText = "border: 5px solid yellow; padding: 10px"; 
  div[1].setAttribute("style", "border: 5px solid red; margin: 20px");

<div>cssText yellow</div>
<div>setAttribute red</div>

Saunder

Answer 4

VanillaJS:

selector is any CSS selector you want.

in style you can write any valid CSS Property : Value.

for(CSSStyleRule of cssText.cssRules ){
    if(CSSStyleRule.selectorText === selector){

      CSSStyleRule.style = 'color : yellow';

Kerenkeresan