Reading CSS values with jQuery

Question

I wonder whether there is a way to read a special css-value of a class with jQuery. The scenario looks more or less like this:

HTML:

<div class="box"></div>

CSS:

.box { margin-top: 100px; }

Now I would like to check whether that .box has a margin-top of 100px or not to make in if-statement based on it.

You can't actually read the value from the .box rule, but you can use .css('margin-top') to get the element's current computed margin-top value. — Jason P
– Jason P, Commented Mar 20, 2014 at 18:46

James · Accepted Answer · 2014-03-20 18:54:51Z

1

The answer is exactly as Jason referred in the his comment. Here is a jsfiddle for your reference

jquery used:

$(function(){
    if($(".box").css('margin-top') == '100px'){
        alert('yes');
    }
});

answered Mar 20, 2014 at 18:54

James

4,5901 gold badge21 silver badges34 bronze badges

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

2 Comments

MarcL Over a year ago

Yeah thank you! Also for the fiddle! But I still can't get working the thing I want to. I wanted to use this in an if-statement to check if a special action (reducing the margin-top of a special div) is allowed to be fired. My problem is: I have a prev/next navigation and when there is no "prev" or "next" element, the margin-top has to be animated to 0. Everything works fine, but when you double-click when this action has to take place the margin-top value gets two times the negative value... Have a look at it on line 62 following: jsfiddle.net/mleyendecker/632Fw/156

James Over a year ago

@MarcL good.. i have also created a fiddle jsfiddle.net/39james/eCUR9. If you want you can take a look at this. Basically what i did is when the navigation reaches the last item, i make it visible:hidden. My styles are not correct, so check the JQuery section and try adding it to your fiddle.

Collectives™ on Stack Overflow

Reading CSS values with jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related