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

#javascript

function right() {
   square.style.left += 50+'px';
}


Как устанавливать не фиксированное значение в style.left, а прибавлять\отнимать его ?
    

Ответы

Ответ 1

Данное свойство является строкой, поэтому прежде чем увеличивать его, его надо перевести
в число, например используя функцию 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;
}