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

css, javascript

Solution

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/

Problem

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.

Original source