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

Here’s the easiest way (for the general case):

$(this).css('left', '+=150');
$(this).css('top', '-=100');

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.

---

If you need to do it “manually” (for example, as part of creating a new element):

var left = parseInt($(this).css('left')) + 150;
var top = parseInt($(this).css('top'));

$(this).after('<div style="top: ' + top + 'px; left: ' + left + 'px; position: absolute">Cancel</div>');

You need to use parseInt because .css('left') returns 150px. You then have to put back the px as part of the inline style.