Firefox和IE無法修改cssRules

Question

我需要更改現有的全局CSS規則，然後訪問document.styleSheets，獲取我的規則並對其進行修改。

我通過訪問selectorText屬性來修改選擇器。

CSS代碼

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

JavaScript代碼

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. 

我的問題是，在Firefox和Internet Explorer，物業selectorText的所有版本似乎是隻讀的。

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

我該如何使它適用於Mozilla Firefox，Microsoft Internet Explorer和Edge？

Answer 1

按照MDN，selectorText旨在爲只讀：

的CSSRule.selectorText屬性獲取選擇規則集的文字表述。這是以只讀方式實施的;要動態設置樣式表規則，請參閱使用動態樣式信息。

不幸的是，似乎沒有跨瀏覽器的方式來更改CSS規則的選擇器。如果這是您的目標，您可以嘗試刪除整個規則並使用相同的規則索引替換爲新規則，那麼您只需將所有規則屬性與選擇器一起包括在內，如下所示：

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

適用於Firefox和其他瀏覽器。見insertRule()和deleteRule()。