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
– wheresrhys, Commented Apr 17, 2009 at 9: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
– BrainSlugs83, Commented Jun 19, 2012 at 7:04

Mkkt Bkkt · Accepted Answer · 2009-04-17 09:02:04Z

297

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, 2009 at 9:02

Mkkt Bkkt

122k40 gold badges154 silver badges177 bronze badges

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

4 Comments

BrainSlugs83 Over a year ago

There's no way to do it with a selector?

ante.sabo Over a year ago

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?

Collarbone Over a year ago

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?

probie Over a year ago

@Collarbone You could always use setTimeout() and clearTimeout() to delay the call for a second or so once the document has loaded.

Darin Dimitrov · Accepted Answer · 2009-04-17 09:01:03Z

63

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

answered Apr 17, 2009 at 9:01

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

1 Comment

Ryan Burney Over a year ago

This doesn't answer the question as asked -- see DrJokepu's answer below.

Paul Lammertsma · Accepted Answer · 2014-02-26 13:03:15Z

13

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

edited Feb 26, 2014 at 13:03

Paul Lammertsma

38.4k17 gold badges138 silver badges190 bronze badges

answered Feb 26, 2014 at 12:43

Sandeep Gupta

3804 silver badges14 bronze badges

Comments

kelseedev · Accepted Answer · 2015-01-21 23:25:08Z

6

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"); }
    })

answered Jan 21, 2015 at 23:25

kelseedev

1091 silver badge3 bronze badges

Comments

Mario Vázquez · Accepted Answer · 2018-07-29 14:22:27Z

2

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
}

answered Jul 29, 2018 at 14:22

Mario Vázquez

79710 silver badges12 bronze badges

Comments

0100110010101 · Accepted Answer · 2009-04-17 09:01:50Z

1

i've found one solution:

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

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

answered Apr 17, 2009 at 9:01

0100110010101

6,7595 gold badges36 silver badges38 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related