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

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

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

然后，理想情况下，我想添加一个规则，我也有引用，这样我就不能消除它，但至少我可以更改它。然而，恐怕这不能做到

• 那么问题是，这一准则可行吗

---

（我知道我可以通过解析cssRules并找到规则并存储引用来获取css规则，我只是想知道是否有办法通过insertRule（）来实现这一点，这似乎是可能的）

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

---

你能告诉我们你为什么要这么做吗？可能。我需要更改必须动态定义的类的显示属性。但是我可以（静态地）定义40个类（.item_0，.item_1，…）（然后不应该访问40个），然后解析css，存储规则，然后动态地更改规则。或者我可以动态添加规则，如果已经添加了，只需访问它们并更改属性即可。对于第二种方法，我需要知道如何访问它们，如果我必须再次解析css表，那么它似乎不是一个好的解决方案。现在我可以储存参考资料了，我想我可以走了

 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)

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);