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

我正在考虑动态添加和删除css规则的最佳方式。Javascript，通过insertRule（）插入后访问和修改css规则（）

*我不希望使用deleteRule（）函数，因为它要求不能存储的索引（在这个意义上，如果我添加规则，先前插入规则的指标可能会改变）

然后，理想情况下，我想添加一个规则，我也可以参考，以便我不能消除它，但至少我可以改变它。但是，恐怕这是无法完成的。

问题是，这段代码是否可行？

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（），现在看来，这应该是可能的）

来源

2016-08-22 Gerard

你能告诉我们为什么你要这么做吗？可能的[XY问题]（http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem/66378#66378）。 – mjsarfatti

我需要更改必须动态定义的类的显示属性。但是我可以定义（静态地）让我们说40个类（.item_0，.item_1，...）（然后不应该达到40），然后解析css，存储规则，然后动态更改规则。或者我可以动态地添加规则，并且如果他们已经添加，只需访问它们并更改属性。对于第二种方法，我需要知道如何访问它们，如果我必须再次解析css表单，那么它似乎不是一个好的解决方案。现在我可以保存参考资料，我认为我很好 – Gerard

比我的想法更简单，我可以选择的规则，因为我有指数

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

来源

2016-08-22 10:18:08 Gerard

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

回答

相关问题