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

Question

Is it possible to select DOM elements by their CSS property?

For example:

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 

I know that it is possible to select elements using the jQuery each method, like this:

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

However it's maybe slow and unelegant. Is there a cooler way to do that?

Answer 1

I would use a custom selector:

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

Usage:

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

Answer 2

However it's maybe slow and unelegant. Is there a cooler way to do that?

It is slow. It is unelegant. Don't do that. Select your elements with an ID or eventually with a class, but never that way. Seriously.

Answer 3

My suggestion is to append different classes with different background-colors. Then you could select those.

Or you could try .css() http://api.jquery.com/css/

Answer 4

Answer : There is no way to do that, and for good reasons. It'll be very slow, and it is of course worse than unelegant.

Personnaly, if i one day see one of my devs do that, i'll kill him and/or ask my boss to replace him immediately.

Use classes or much bettern ids ! If you can not, the problem comes from your application structure logic.