Jquery: How to check if the element has certain css class/style

Question

I have a div:

<div class="test" id="someElement" style="position: absolute"></div>

Is there any way to check if the certain element:

$("#someElement")

has a particular class (in my case, "test").

Alternately, is there a way to check that en element has a certain style? In this example, I'd like to know if the element has "position: absolute".

Thank you very much!

not sure if it'sd the question or the answer that's wrong, but the question has style="test", and the answer looks for class="test" — wheresrhys, Apr 17 '09 at 09:26
My guess is, the question is wrong, since he marked the wrong answer as right; but regardless, after looking at the votes, I think most people have stumbled in here looking for the correct answer to this wrong question... er, if that makes any sense... The answer from DrJokepu, I mean. It's why I'm here at least. — BrainSlugs83, Jun 19 '12 at 07:04

score 296 · Answer 1 · answered Apr 17 '09 at 09:02

296

CSS Styles are key-value pairs, not just "tags". By default, each element has a full set of CSS styles assigned to it, most of them is implicitly using the browser defaults and some of them is explicitly redefined in CSS stylesheets.

To get the value assigned to a particular CSS entry of an element and compare it:

if ($('#yourElement').css('position') == 'absolute')
{
   // true
}

If you didn't redefine the style, you will get the browser default for that particular element.

answered Apr 17 '09 at 09:02

Tamas Czinege

118,853
40
150
176

3

There's no way to do it with a selector? – BrainSlugs83 Jun 19 '12 at 07:02
with this you can see what is the actual property, what I need to know is if this property is being set directly or is it inherited from css style / browser... is that possible? – ante.sabo Sep 20 '12 at 11:24
Doesn't seem to work for the scenario if the DOM changes/css value of an object changes after page loads. Any idea how to get it to watch css changes after the DOM loads? – Collarbone Jul 19 '16 at 06:01
@Collarbone You could always use setTimeout() and clearTimeout() to delay the call for a second or so once the document has loaded. – probie Aug 20 '18 at 21:34

score 61 · Accepted Answer · answered Apr 17 '09 at 09:01

61

if($('#someElement').hasClass('test')) {
  ... do something ...
}
else {
  ... do something else ...
}

answered Apr 17 '09 at 09:01

Darin Dimitrov

1,023,142
271
3,287
2,928

77

This doesn't answer the question as asked -- see DrJokepu's answer below. – Ryan Burney Sep 29 '11 at 18:38

score 13 · Answer 3 · edited Feb 26 '14 at 13:03

13

if ($("element class or id name").css("property") == "value") {
    your code....
}

edited Feb 26 '14 at 13:03

Paul Lammertsma

37,593
16
136
187

answered Feb 26 '14 at 12:43

Sandeep Gupta

380
4
14

score 6 · Answer 4 · answered Jan 21 '15 at 23:25

Or, if you need to access the element that has that property and it does not use an id, you could go this route:

$("img").each(function () {
        if ($(this).css("float") == "left") { $(this).addClass("left"); }
        if ($(this).css("float") == "right") { $(this).addClass("right"); }
    })

score 1 · Answer 5 · answered Jul 29 '18 at 14:22

Question is asking for two different things:

An element has certain class
An element has certain style.

Second question has been already answered. For the first one, I would do it this way:

if($("#someElement").is(".test")){
    // Has class test assigned, eventually combined with other classes
}
else{
    // Does not have it
}

score 1 · Answer 6 · answered Apr 17 '09 at 09:01

1

i've found one solution:

$("#someElement")[0].className.match("test")

but somehow i believe that there's a better way!

answered Apr 17 '09 at 09:01

0100110010101

6,469
5
33
38

Jquery: How to check if the element has certain css class/style

6 Answers6

Linked