如何获得所有具有特定CSS规则的节点,例如,如果已定义:
html {
color: blue;
}
div.x {
color: blue;
}
我想获取所有具有
color: blue
的节点,我想要仅获取html
(document.children[0]
)和所有具有div
节点的class='x'
,而不是受该规则影响的所有子节点。编辑最终目标是从网站上删除某些CSS规则,我已经尝试过此脚本,但在Chrome上不起作用:
var xRules = ['userSelect','webkitTouchCallout','webkitUserSelect','khtmlUserSelect','mozUserSelect','msUserSelect'];
var dS = document.styleSheets;
for(var z in dS) {
var dsz = dS[z].cssRules;
if(!dsz) continue;
for(var y in dsz) {
var dszy = dsz[y].style;
if(!dszy) continue;
console.log(dszy.webkitUserSelect);
for(var x in xRules) {
var xx = xRules[x];
dszy.removeProperty(xx);
}
}
}
因此,我能想到的是,我必须找到元素然后删除样式。
最佳答案
您可以使用document.styleSheets
阅读已加载的CSS规则。然后,找到设置特定属性的规则(在您的情况下为style.color == "blue"
)。
然后,从规则中获取selectorText
,它将为您提供选择器。然后使用document.querySelector()
将获得的选择器作为参数来选择元素将很容易。
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var x = 0; x < classes.length; x++) {
var cls = classes[x];
if(cls.style.color == "blue") {
alert(cls.selectorText);
//Gets a node list of the elements matching the selector
var elements = document.querySelectorAll(cls.selectorText);
}
}
html {
color: blue;
}
div.x {
color: blue;
}