자바 스크립트에서 getElementById ('ID') var에 X VS. 스타일은

Question

는 document.getElementById를 ('myImg')를 사용하여 나에게 이상한 것 같다. style.width 대신 VAR의 X = document.getElementById를 ('myImg') .style.width 다른 결과를 얻을 수있는 사람은 누구나 설명 할 수 있습니까? 여기 내 예제 코드 (아래 실제 코드는 훨씬 길다), document.getElementById ('myImg'). style.width를 변수로 저장할 수 있지만 가능한 한 줄이려고합니다. 반 직관적으로 작동하는 것 같다 페이지 ...

<img id="myImg" src="w3javascript.gif" style="width:100px;height:132px;"> 

<script> 
window.onload = function myFunction() 
{ 
var x = document.getElementById('myImg').style.width; 
    var width = window.innerWidth || document.documentElement.clientWidth; 
if(width >= 450){ 
x = "450px" 
} 
} 
</script> 

이제 위의 코드는 다음과 다른 결과를 (그리고 나는 어떤 이유를 생각 ...이 없다) : 값을 할당

<img id="myImg" src="w3javascript.gif" style="width:100px;height:132px;"> 

<script> 
window.onload = function myFunction() 
{ 
var x = document.getElementById('myImg').style.width; 
    var width = window.innerWidth || document.documentElement.clientWidth; 
if(width >= 450){ 
document.getElementById('myImg').style.width = "450px" 
} 
} 
</script> 

Answer 1

을 변수가 아닌 변수은 다른 변수 또는 속성 (예외 : 전역 범위, with)의 값을 변경합니다.

간단한 예 : 첫 번째 경우

var foo = 42; 
var bar = foo; 

bar = 21; 
// foo is still 42 

는 만 x 변수의 값을 변경한다.
두 번째 경우에는 width 속성의 값이 변경됩니다.

JavaScript는 pass-by-value이 아니라 pass-by-reference입니다.

---

요소를 두 번 쿼리하지 않으려면 요소 또는 해당 스타일을 변수에 저장하십시오. 예를 들면 :

var style = document.getElementById('myImg').style; 
// ... 
style.width = ...; 

Answer 2

당신이 할 경우 :

var x = document.getElementById('myImg').style.width; 
var width = window.innerWidth || document.documentElement.clientWidth; 
if(width >= 450){ 
    x = "450px" 
} 

당신이 실제로 당신이 "450 픽셀"값으로 X을 덮어 먼저, 변수 x에 당신의 요소의 폭을 할당에 있지만, 당신은 요소를 바꾸지 않습니다.

두 번째 예에서 document.getElementById('myImg').style.width = "450px"은 실제로 요소의 너비를 설정하지만 은 변수 x를 변경하지 않습니다.

이 코드를 단순화하기 위해, 당신은 사용할 수 있습니다 : 두 번째 경우에 DOM을 수정하려고

var x = document.getElementById('myImg'); 
var width = window.innerWidth || document.documentElement.clientWidth; 
if(width >= 450){ 
    x.style.width = "450px" 
}