获取具有特定STYLE属性的每个HTML对象

Question

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

Answer 1

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

这是一个关于JSBin的工作示例.并检查其代码.

重要提示:上层代码未经测试但应易于进一步开发(如检查参数,转换值等)