Firefox und IE kann nicht ändern cssRules

Question

Ich muss vorhandene globale CSS-Regeln ändern, dann greife ich auf document.styleSheets, meine Regel erhalten und ändern.

Ich modifiziere den Selektor durch Zugriff auf die selectorText Eigenschaft.

CSS-Code

<style type="text/css"> 
    .class { 
     color: #230020; 
    } 
</style> 

JavaScript-Code

var rule = document.styleSheets[0].cssRules[0]; // obtain the first rule. 

/* Chrome, Opera, Safari */ 
rule.selectorText; // returns ".class" 
rule.selectorText = ".another-class"; 
rule.selectorText; // returns ".another-class", then it works and the rule changed. 

Mein Problem ist in allen Versionen von Firefox und Internet Explorer, dass die Eigenschaft selector scheint zu schreibgeschützt.

/* Internet Explorer, Edge, and Firefox */ 
rule.selectorText; // returns ".class" 
rule.selectorText = ".another-class"; 
rule.selectorText; // returns ".class", It remains as it was. 

Wie kann ich es mit Mozilla Firefox, Microsoft Internet Explorer und Edge arbeiten lassen?

Answer 1

Nach dem MDN wird selectorText gemeint werden read-only: für den Regelsatz, die Textdarstellung des Wählers

Die CSSRule.selectorText Eigenschaft bekommt. Dies wird in einer readonly Weise implementiert; Um Stylesheet-Regeln dynamisch festzulegen, siehe Verwenden dynamischer Formatierungsinformationen.

Leider scheint es keine browserübergreifende Möglichkeit zu geben, den Selektor einer CSS-Regel zu ändern. Wenn dies Ihr Ziel ist, können Sie versuchen, die gesamte Regel zu löschen und sie durch einen neuen zu ersetzen, indem Sie den gleichen Regelindex verwenden. Sie müssen lediglich alle Regeleigenschaften zusammen mit dem Selektor einschließen:

var cssText = document.styleSheets[1].cssRules[0].style.cssText; 
document.styleSheets[0].deleteRule(0); 
document.styleSheets[0].insertRule('.another-class { ' + cssText + ' }', 0); 

Funktioniert für mich in Firefox und anderen Browsern. Siehe insertRule() und deleteRule().