Question

是否可以根据CSS属性的值选择元素。例如：

CSS规则：

div.blockWithBorder { border: 1px solid red; }

HTML标记：

<div id="A" class="blockWithRedBorder">...</div>
<div id="B" style="border: 5px dashed red">...</div>
<div id="C" style="border: 2px solid #FF0000">...</div>

我想找到所有带有红色边框的div元素。 A，B和C匹配此查询。

Answer 1

你可以这样做，但这意味着要为你查询的每个元素获取计算出的样式值，这可能是一个非常昂贵的操作。

以下是一个例子：

var a = [].slice.call(document.querySelectorAll("a"));

var redLinks = a.filter(function(i){
  window.getComputedStyle(i);
  var color = i.style.borderColor.toLowerCase();
  return (color === 'red' || color === '#f00' || color === '#ff0000') ? i : false;
});

Answer 2

您可以过滤元素集：

var $divsBorderRed = $('div').filter(function(){
    return ~this.style.borderColor.indexOf("red") || ~this.style.borderColor.indexOf("rgb(255, 0, 0)") || ~this.style.borderColor.indexOf("#FF0000")
});

编辑：或者像这样：

var $divsBorderRed = $('div.blockWithRedBorder, div[style*="#FF000"], div[style*="red"]');

正如你所看到的，在所有情况下都不是很好......

Answer 3

首先，你不应该必须为此编码。像＆＃34; blockWithRedBorder＆＃34;或者应该有一些选择器。如果您正在寻找下面的快速解决方案，那么应该可以帮助您....

您可以遍历所有divs并阅读border css属性，如下所示：jsfiddle

$("div").each(function(i, item){
    var selector = '#' + item.id;
    var yourValue = $(selector).css("border");
    // you can perform your 'red' color check here
    // make sure to match it with 'rgb(255, 0, 0)' and with color 'red'.
});

基于css属性的选择器

3 个答案: