Question

next.onclick = function() { 
    move('left', li_items[0]);
};

var move = function(direction, el) {
    pos = el.style[direction].split('px')[0];
    pos = parseInt(pos, 10) + 10; 
    el.style[direction] = pos + 'px';
};

I’m using the simple code above to try and move an element. Now when I breakpoint on this, the value of el.style[direction] is: " ". So then when i try to do anything with it, it breaks. Why would this be? Isn’t style.left supposed to return an integer?

Answer 1

Why would this be?

Presumably because it hasn’t been set to anything.

Isn’t style.left supposed to return an integer?

No. It is supposed to return a string containing the value of the CSS left property as set directly on the element (either by setting the JS property itself or by using a style attribute). It does not get a value from the cascade and it should only be an integer if the value is 0 (since all other lengths require units).

See How to get computed style of a HTMLElement if you want to get the computed value for the property rather than what I described in the previous paragraph.