Using JavaScript to increment top/left/bottom/right values

Question

I am trying to increment the position of an element by, say, x pixels. Here is what I've tried so far:

var top = document.getElementById("something").style.top;
top = top + "300px"

I know that this is not going to work, but I was wondering if it was possible to increment a position value like this.

Answer 1

Because style.top is a string with units on the end of it like "300px" you can only do math with it when you convert just the numeric part to an actual number.

Assuming you have a positioned element (so setting the top value will do something) and you already have a top style set directly on the element and not set via CSS (so getting obj.style.top will actually get you something), you can do it by parsing the number out of the style value like this:

var obj = document.getElementById("something");
var topVal = parseInt(obj.style.top, 10);
obj.style.top = (topVal + 300) + "px";

Working example: http://jsfiddle.net/jfriend00/pt46X/

Answer 2

That won't work fine because, for example, if top had a value of 200px, it would become "200px300px". Try this:

var elem = document.getElementById("something");
elem.style.top = parseInt(elem.style.top, 10) + 300 + "px"

Demo WEEEE!!!!