基于css属性的选择器答案

【问题标题】：Selector based on css property基于css属性的选择器
【发布时间】：2014-03-21 18:43:53
【问题描述】：

是否可以根据 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 匹配此查询。

【问题讨论】：

标签： jquery css jquery-selectors

【解决方案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;
});

【讨论】：

看起来OP想要某种CSS selector来解决他的问题，而不是任何其他方法（例如使用jQuery，...），如果你说有可能，你应该发布一些CSS代码，添加了关于性能不佳的注释。
你可以这样做...是的，但是怎么做？
使用需要 JavaScript 的示例进行编辑。当然他不能使用 CSS 选择器来选择样式。
谢谢。我只是忘记了选择器可以表示为函数！

【解决方案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"]');

如您所见，并非在所有情况下都很好......

【讨论】：

您只是在比较内联样式，您需要使用计算的样式与通过样式表设置的样式进行比较。
@Jack 说得对！我真的不知道我为什么要回答这个问题，因为显而易见的答案应该是：“不要那样做！”
关于计算样式，为什么不直接使用：$(this).css("border-color")?
@nlips 确定你可以使用它
@nlips 这只是同一件事的 jQuery 风格。 jQuery 将在元素上调用 window.getComputedStyle 以获取 'border-color' 的样式值。

【解决方案3】：

首先，您不应该必须为此编写代码。应该存在像“blockWithRedBorder”这样的类或一些选择器。说如果您正在寻找下面的快速解决方案应该对您有所帮助....

您可以遍历所有 divs 并像这样读取边框 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'.
});

【讨论】：

我觉得$(item)会比$('#'+item.id)效率更高