значение переменной удерживания не может быть изменено

Question

Мне любопытно про простую проблему. Вот код:

var square = document.getElementById('square') 
 
var left = square.style.left 
 

 
function moveNoVariable() { 
 
    square.style.left = "100px" // works 
 
} 
 

 
function moveWithVariable() { 
 
    left = "100px" // doesn't work 
 
} 
 

 
moveNoVariable()

#square { 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid black; 
 
    background-color: red; 
 
    position: relative; 
 
}

<div id="square"></div>

Я просто интересно, почему стиль не изменится, если я использую «левый», даже если он хранит правильное значение.

Спасибо.

Answer 1

square.style.left - это строка. Если вы введете строку в переменную, переменная сохранит копию данной строки. Если вы поместите объект в переменную, переменная будет ссылаться на исходный объект. Таким образом, вы можете сделать это, например:

var square = document.getElementById('square') 
var style = square.style 

function moveNoVariable() { 
    square.style.left = "100px" // works 
} 

function moveWithVariable() { 
    style.left = "100px" // will work 
}