CODEWITHSUNDEEP
javascriptcss
user3786923
user3786923

Reputation: 61

Moving a div to the right

I have this really fundamental question, but I have no idea wheres the problem.

Here's fiddle: http://jsfiddle.net/nL6fvrz8/

I just simply want to move the object to the right with this js, but when I do that in the fiddle it doesnt move at all and if I do it on my computer, it keeps giving me the primary position of the 200px(the amount i want to add it to its first position) 

function doMove(){
var foo = document.getElementById("foo");
foo.style.left = (foo.style.left + 200) + 'px';
}

I know its prolly a little simple, but im clueless. Thanks for your help.

Upvotes: 0

Views: 67

Answers (2)

Bodzio
Bodzio

Reputation: 2520

Define basic position in JS as well, and add parseInt when reading style (left is string in format like this 200px).

document.getElementById("foo").style.left = "300px";
function doMove() {
    var foo = document.getElementById("foo");
    foo.style.left = (parseInt(foo.style.left) + 200) + 'px';
}

Upvotes: 0

j08691
j08691

Reputation: 208032

Only inline styles can be referenced via the x.style syntax. To get styles set via a style sheet, use getComputedStyle:

function doMove() {
    var elem = document.getElementById("foo");
    var foo = window.getComputedStyle(elem, null).getPropertyValue("left");
    elem.style.left = parseInt(foo,10) + 200 + 'px';
}

jsFiddle example

Upvotes: 3

Related Questions