jQuery get computed CSS value

Question

I have a loop which decreases the margin-top by 182px every iteration. I want to get the value of margin-top so I can tell it when to stop running but when I try run it in console, it returns "undefined" Please advise how to change this to get the real value.

Here is what I am using, I am using attr() because the value it needs to get is an inline style:

$marginTop = $('.emp-wrap').attr("style");

The rest of the code is below

// if statements to move carousel up
$carouselNum = $('.carousella').length;

$marginTop = $('.emp-wrap').attr("style");

if($carouselNum  > 1){
//     // function empMove, the '-=' allows the -margin-top to run every time. Without this it will set the margin-top to the same value every loop
    function empMove() { $('.emp-wrap').css('margin-top', '-=182')};

    setInterval(empMove, 20000);
}
else if($carousel < 1){
    // do something
}
else{
    // do something
}

Hi, all I tried the css("margin-top"); method first and this does return a value but it is the original value of "0px". The value I am after is an inline style hence I tried using attr. — Clinton Green
– Clinton Green, Commented Jan 16, 2013 at 0:25
Where do you want to use the marginTop? You may have retrieved the marginTop before it has been incremented.? — dunli
– dunli, Commented Jan 16, 2013 at 1:40
@dunli I want to use it while the loop is running. I think you may have found the answer, the people below seem to have the correct answer but the variable name returns the value before incrementation. Do you have a method running it while incrementing? Thanks :) — Clinton Green
– Clinton Green, Commented Jan 16, 2013 at 2:41
Have you tried putting $marginTop = $('.emp-wrap').attr("style"); inside the empMove() function? — dunli
– dunli, Commented Jan 16, 2013 at 4:49
@dunli Thanks, I tried that after your first comment and it did solve the problem. Cheers — Clinton Green
– Clinton Green, Commented Jan 16, 2013 at 20:15

Jonathan Wood · Accepted Answer · 2013-01-16 00:05:38Z

4

Try this:

$marginTop = $('.emp-wrap').css("margin-top");

answered Jan 16, 2013 at 0:05

Jonathan Wood

68.1k86 gold badges308 silver badges542 bronze badges

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

10 Comments

Clinton Green Over a year ago

Hi, when I try that it returns "0px" not the incremented value. However when I tried $marginTop = $('.emp-wrap').css('margin-top', ' '); it returned [<div class="emp-wrap" style="margin-top: -182px;">…</div>]so there it does show the incremented value but how do I access only that value? Thanks

Clinton Green Over a year ago

Yes please see my comment above. Cheers

Clinton Green Over a year ago

$marginTop = $('.emp-wrap').css("margin-top"); returns "0px"

Clinton Green Over a year ago

$marginTop = $('.emp-wrap').css('margin-top', ' '); returns [<div class="emp-wrap" style="margin-top: -182px;">…</div>]

Jonathan Wood Over a year ago

The second version is invalid. It sets the margin-top to ''. That's not what I suggested. If what I suggested doesn't work, then I say you're not using it right.

|

Lyn Headley · Accepted Answer · 2013-01-16 00:05:57Z

0

$marginTop = $('.emp-wrap').css("margin-top");

answered Jan 16, 2013 at 0:05

Lyn Headley

11.6k4 gold badges36 silver badges38 bronze badges

1 Comment

Clinton Green Over a year ago

Hi, that only returns the original value of "0px" not the incremented value, any ideas? Thanks

Zeal · Accepted Answer · 2013-01-16 00:12:44Z

0

use the following

$('.emp-wrap').css("margin-top");

Additionally you could use parseInt to get the integer value only

parseInt($(".testclass").css("margin-top"));

See: http://jsfiddle.net/kEVq7/

answered Jan 16, 2013 at 0:12

Zeal

2491 silver badge3 bronze badges

1 Comment

Clinton Green Over a year ago

Thanks I saw it working on your fiddle but when I use css() it only returns the original value, not the incremented value.

Collectives™ on Stack Overflow

jQuery get computed CSS value

3 Answers 3

10 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related