Как увеличивать значение style.left?

function right() { square.style.left += 50+'px'; }
Как устанавливать не фиксированное значение в style.left, а прибавлять\отнимать его ?

Ответ

Данное свойство является строкой, поэтому прежде чем увеличивать его, его надо перевести в число, например используя функцию parseInt
function right() { square.style.left = (parseInt(square.style.left,10)+50)+'px'; }
Пример:
var square = document.getElementById('square'); square.onclick = function() { right() } function right() { square.style.left = (parseInt(square.style.left, 10) + 50) + 'px'; } #square { position: absolute; background-color: lime; width: 40px; height: 40px; }

Стоит обратить внимание на то, что свойство left установлено в inline стилях, в противном случае оно будет равно пустой строке, и parseInt(square.style.left, 10) вернет NaN
Другим вариантом, может быть использование функции getComputedStyle, позволяющей получить текущее значение свойства, как значения по умолчанию, в случае, когда inline свойство пустое.
var square = document.getElementById('square'); square.onclick = function() { right() } function right() { square.style.left = (parseInt(square.style.left || getComputedStyle(square)['left'], 10) + 50) + 'px'; } #square { position: absolute; background-color: lime; width: 40px; height: 40px; }