我正在寻找一个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>

在这种情况下,假设我想要:
getElementByCSS('color','#DDD')

它应该返回元素id1和id4
我在使用jQuery,我打赌jQuery库中一定有一些东西可以简化这个任务,但是如果需要的话,我会向其他库或本地JS代码开放。我一直在绞尽脑汁,但找不到简单的方法,答案可能在某个jQuery调用中。
提前谢谢!
布鲁诺
编辑:修正了示例中的错误,感谢Alex R.和mplungjan

最佳答案

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)");

This is a working example on JSBin。并检查its code
重要提示:上层代码未经测试,但应易于进一步开发(如检查参数、转换值等)

10-05 21:03
查看更多