adding pixels to jquery .css() left property

Question

This is my code:

var lef=$(this).css("left");
var top=$(this).css("top");
alert(lef);
$(this).after("<div class='edit cancel' style='position:absolute;top:"+top+";left:"+lef+"'>Cancel</div>");

Now the statement var lef=$(this).css("left") + 150, doesn't seem to work. I want to get the left property and add 150 pixels to it

How can i do this ?

Thanks.

Answer 1

As of jQuery 1.6, you can do this most easily by simply adding or subtracting from the current value. For example, to add 150px:

$(this).css("left", "+=150")

http://api.jquery.com/css/#css-properties

As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px.