Select elements by CSS property in JavaScript

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