To update existing global CSS rules, I access the document.styleSheets property to locate the rule and make modifications.
The selector can be modified by accessing the selectorText property.
Sample CSS code:
<style type="text/css">
.class {
color: #230020;
}
</style>
JavaScript snippet:
var rule = document.styleSheets[0].cssRules[0]; // Obtain the first rule.
/* Works in Chrome, Opera, Safari */
rule.selectorText; // Returns ".class"
rule.selectorText = ".another-class";
rule.selectorText; // Now returns ".another-class", showing successful modification.
An issue arises with Firefox and Internet Explorer as the selectorText property appears to be read-only in these browsers.
/* Behavior in Internet Explorer, Edge, and Firefox */
rule.selectorText; // Returns ".class"
rule.selectorText = ".another-class";
rule.selectorText; // Still returns ".class" without updating.
Is there a workaround to achieve this functionality in Mozilla Firefox, Microsoft Internet Explorer, and Edge?