javascript - 在没有 jQuery 的情况下选择所有具有特定 css 规则的节点

Question

如何获取所有具有特定 CSS 规则的节点，例如如果已定义:

html {
  color: blue;
}
div.x {
  color: blue;
}

我想获取所有具有color: blue 的节点，我想获取html (document.children[0] ) 以及仅具有 class='x' 节点的所有 div，而不是所有受该规则影响的子节点。

编辑 最终目标是从网站中删除某些 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);
    }
  }
}

所以我能想到的就是我必须找到元素然后删除样式。

Answer 1

您可以使用 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;
}