Question

Is it possible to change a CSSRule‘s .selectorText from javascript ? MDN says it is a getter/setter but setting it seems to have no effect…

references :

https://developer.mozilla.org/en-US/docs/DOM/CSSStyleRule/selectorText?redirectlocale=en-US&redirectslug=DOM%2FcssRule.selectorText

selectorText() gets/sets the textual representation of the selector for the rule set.

Edit :
well all the “docs” are wrong and misleading.

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRule

attribute DOMString        selectorText;
                                      // raises(DOMException) on setting

Answer 1

No, it appears indeed that the browser implementation (at least in Firefox) opts to choose these as readonly (as is apparently allowed per the spec by the fact that selectorText (and cssText as well) can throw “NO_MODIFICATION_ALLOWED_ERR: Raised if the rule is readonly.”).

You can, however, modify the style property:

<style>
body { background-color: darkblue; }
</style>
<p>abc</p>
<script>
  var stylesheet = document.styleSheets[0]
  stylesheet.cssRules[0].style.color = 'red'; // Will make body red
</script>

You can, however, get by without parsing CSS, by creating and inserting <style> tags whose innerHTML you set.