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

This is a working example on JSBin。并查看its code。

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

Answer 2

这里有解决方案：

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

像这样使用：

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

第三个参数是限制在哪个父元素中搜索（默认document，但在所有文档中搜索可能非常慢，明智地使用此参数）

希望这会有所帮助。干杯

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

2 个答案:

jQuery选择器过滤器