可変保持スタイル値は変更できません

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 
}