Javascript，通过insertRule（）插入后访问和修改css规则

Question

我正在考虑动态添加和删除css规则的最佳方法。

*我不想使用deleteRule（）函数，因为它需要一个无法存储的索引（在某种意义上，如果我添加规则，以前插入的规则的索引可能会改变）

然后，理想情况下我想添加一条规则，我也有参考，所以我无法消除它，但至少我能够改变它。但是，我担心这不可能做到。

• 那么问题是，这段代码可行吗？

https://jsfiddle.net/b4t3z5w4/1/

 var rule = ".item_1 { display: inline;}";
 var stylesheet = document.styleSheets[1];
 var rules = document.styleSheets[1].cssRules;
 var myrule = ".item0 {display:visible;}";
 var mycssrule = stylesheet.insertRule(myrule,rules.length);

 myrule.style.display = 'none'; // doesn't work (it is just a string)
 mycssrule.style.display = 'none'; // doesn't work (insertRule only returns I guess a true)

（我知道我可以通过解析cssRules并查找规则然后存储引用来获取css规则，我只是想知道是否有办法通过insertRule（）来实现它，似乎它应该是可能的）

Answer 1

比我想象的更简单，我可以选择规则，因为我有索引

https://jsfiddle.net/b4t3z5w4/2/

var rule = ".item_1 { display: inline;}";
var stylesheet = document.styleSheets[1];
var rules = document.styleSheets[1].cssRules;
var myrule = ".item0 {display:visible;}";
var i = rules.length;
stylesheet.insertRule(myrule,rules.length);
var mycssrule = rules[i];
mycssrule.style.width = '80px';
console.log(mycssrule);