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?

Johan · Accepted Answer · 2012-02-27 11:34:08Z

4

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

answered Feb 27, 2012 at 11:34

Johan

35.4k62 gold badges191 silver badges309 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nagy Márton Over a year ago

i love it. Is there any way to parametering that 'foo' ? forexample $('div:foo("background-color", "#0cf")')

Johan Over a year ago

@NagyMárton I would suggest keeping that kind of logic inside the function that returns the elements that you need. Use && if you want to add more conditions

bytecode77 · Accepted Answer · 2012-02-27 11:31:49Z

0

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/

answered Feb 27, 2012 at 11:31

bytecode77

15k31 gold badges119 silver badges151 bronze badges

2 Comments

Nagy Márton Over a year ago

thx for the answer but i want to use some kind of fast filtering, for a global fallback library. forexample, i added a -spec-border-radius css property, it call a method which add rounded corner for that object in any browoser.

bytecode77 Over a year ago

I don't think doing it this way is a pretty solution. Mozilla, Webkit and IE9+ have border-radius and if you want it for IE 8 you would have to use images.

Florian Margaine · Accepted Answer · 2012-02-27 11:32:49Z

0

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.

answered Feb 27, 2012 at 11:32

Florian Margaine

61.2k15 gold badges94 silver badges120 bronze badges

8 Comments

Kaii Over a year ago

should clearly point out that both selecting by class and/or CSS property will make jQuery parse the whole DOM tree. (in most browsers) the only direct (means: fast) selector supported by all JS implementations is the ID selector.

Florian Margaine Over a year ago

Which is why "eventually" is in italic :-). But for his case, selecting all the elements by class would be a good idea (supposing that the class adds a background).

hooleyhoop Over a year ago

I agree with what you say but it doesn't answer the question.

Florian Margaine Over a year ago

I think it does. He wants to do something very specific. I answer that he definitely must not do it.

Nagy Márton Over a year ago

thx for the answer, i just want to create a fast automatic css3 fallback lib, and there is no way to use classes / ids sorry.

|

dievardump · Accepted Answer · 2012-02-27 11:33:20Z

-2

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.

answered Feb 27, 2012 at 11:33

dievardump

2,50318 silver badges21 bronze badges

Collectives™ on Stack Overflow

Select elements by CSS property in JavaScript

4 Answers 4

2 Comments

2 Comments

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related