在 JavaScript 中通过 CSS 属性选择元素

Question

是否可以通过 CSS 属性选择 DOM 元素？

例如：

awsome_function ({'background-color' : '#0cf'});
// return all object, which's background-color css attribute value is '#0cf'

awsome_function (['background-color']);
// return all object, which has background-color css attribute 

awsome_function (['-my-special-cssattribute'])
// return all object, which has '-my-special-cssattribute' css attribute 

我知道可以使用 jQuery each 方法选择元素，如下所示：

$('*').each(function(){
   if($(this).css('-my-special-cssattribute')) {
      /* do something */
   }
})

但是它可能很慢而且不优雅。有没有更酷的方法来做到这一点？

Answer 1

我会使用自定义选择器：

$.extend($.expr[":"], {
    foo: function (e) {
        return $(e).css('background-color') == '#0cf';
    }
});

用法：

alert($('div:foo').size()); //get the count of all the divs that matches the selector

Answer 2

Answer : 没有办法做到这一点，而且有充分的理由。 它会很慢，当然比不优雅更糟糕。

就我个人而言，如果有一天我看到我的一位开发人员这样做，我会杀了他和/或要求我的老板立即更换他。

使用类或更好的 id ！如果不能，则问题出在您的应用程序结构逻辑上。

Answer 3

但是它可能很慢而且不优雅。有没有更酷的方法来做到这一点？

速度很慢。这是不雅的。不要那样做。选择带有 ID 或 最终 带有类的元素，但绝不是这样。认真的。

Answer 4

我的建议是用不同的背景颜色附加不同的类。然后你可以选择那些。

或者你可以试试 .css() http://api.jquery.com/css/