选择所有具有特定css规则但没有jQuery的节点

Select all node that has certain css-rule without jQuery

本文关键字：jQuery 节点 规则 css 选择      更新时间：2023-09-26

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

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

我想得到所有有color: blue的节点，我想得到html（document.children[0]）和所有只有class='x'节点的div，而不是所有受该规则影响的子节点。

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

纯Javascript

Array.from(document.getElementsByTagName('*')).filter(function(el) {
    return window.getComputedStyle(el).color === 'rgb(0, 0, 0)';
})

Array.from目前只在Firefox中工作，但它可以很容易地被[].slice.call(...) 之类的东西取代

现在这在css中是不可能的。但您可以使用jquery（javascript）列出所有元素，并检查颜色是否为蓝色。

$( "*" ).each(function() {
    if ($(this).css("color") === "blue") {
        // do some stuff with $(this)
    }
});

我不确定它是否会工作，因为我不知道jquery是如何返回css颜色属性的。

我刚刚注意到你想要没有jQuery的解决方案，所以这里是：

var all = document.getElementsByTagName("*");
for (var i=0, max = all.length; i < max; i++) {
    if (window.getComputedStyle(all[i], null).getPropertyValue("color") === "blue")
        // Do something with the element here
}
相关文章：