Javascript 获取具有特定样式属性的每个HTML对象

我正在寻找一个javascript函数，它返回文档中具有特定样式属性的每个元素（例如：

background color

）。理想情况下，我希望将该值作为参数传递，以便它只获取属性与该特定值匹配的对象，但除非有神奇的方法，否则获取每个具有该属性的对象就足够了，因为我可以检查每个人，以检查该值是否与我想要的值匹配

---

例如：

<p id="id1" style="color:#DDD"> 
   Hey this is a <b id="id2" style="color:#FFF"> test</b> 
   So <span id="id3" style="background-color:#123"> have a nice 
        <span id="id4" style="color:#DDD">day </span>
      </span>
</p>

它应该返回元素id1和id4

---

我使用的是jQuery，我打赌jQuery库中一定有一些东西使这项任务变得简单，但如果需要的话，我愿意使用其他库或本机JS代码。我一直在绞尽脑汁，但我找不到一个简单的方法，答案可能在某个jQuery调用中

提前谢谢

布鲁诺

---

编辑：修复了示例中的错误，多亏了Alex R.和mplungjan，这里有了解决方案：

function getElementByCSS(cssPropertyName, valueToMatch, parentToSearch){
  if(parentToSearch == null) parentToSearch = document;
  $(parentToSearch).find('*').filter(function(){
     return $(this).css(cssPropertyName) == valueToMatch;
  });
}

像这样使用它：

$redElements = getElementByCSS("background-color", "red");

第三个参数是限制要搜索的父元素（默认值

文档

，但在所有文档中搜索可能非常慢，请明智地使用此参数）

希望这有帮助。干杯

jQuery选择器过滤器 jQuery选择器过滤器用于根据某些条件过滤HTML元素。在您的例子中，它的CSS样式是最合适的选择过滤器。下面的代码可能是一个很好的起点

$.extend($.expr[":"], {
    css: function(element, index, meta, stack) {
        // this should be changed to a regular expresion because colours
        // are reported as rgb(r, g, b) which obviously contains commas as well
        var params = meta[3].split(",");
        var val = $(element).css($.trim(params[0])).toLowerCase();
        return val == $.trim(params[1]).toLowerCase();
    }
});

并应用作：

$(":css(font-size, 20px)");

。检查一下

重要：中的上层代码未经测试，但应易于进一步开发（如检查参数、转换值等）

---

我不认为有一个选择器过滤器，但会interesting@Bruno，您的意思是

getElementByCSS（'color'，'#DDD'）

？为什么要这样做？这似乎是个坏主意。@mplungjan:这将不会产生正确的结果，因为它将onyl检查元素上的内联样式，而不是CSS设置的级联样式。

$(":css(font-size, 20px)");