간의 차이 X = document.getElementById를 ("ID"). 클래스 명 = X = document.getElementById를 ("ID") = x.className

Question

뭐죠

<div class="w3-dropdown-click"> 
    <button class="w3-btn" onclick="clickDrp()">Hover Over me</button> 
    <div class="w3-dropdown-content w3-animate-zoom w3-bar-block" id="cont">   
     <a href="#" class="w3-bar-item w3-button">SomeLink1</a> 
     <a href="#" class="w3-bar-item w3-button">SomeLink2</a> 
     <a href="#" class="w3-bar-item w3-button">SomeLink3</a> 
     <a href="#" class="w3-bar-item w3-button">SomeLink4</a> 
    </div> 
</div> 
<script type="text/javascript"> 
    function clickDrp(){ 
     var x = document.getElementById("cont").className; 
     if(x.search("w3-show") == -1) 
      x += " w3-show"; 
     else 
      x = x.replace(" w3-show",""); 
    } 
</script> 

및

다음 코드 차가

<div class="w3-dropdown-click"> 
    <button class="w3-btn" onclick="clickDrp()">Hover Over me</button> 
    <div class="w3-dropdown-content w3-animate-zoom w3-bar-block" id="cont">   
     <a href="#" class="w3-bar-item w3-button">SomeLink1</a> 
     <a href="#" class="w3-bar-item w3-button">SomeLink2</a> 
     <a href="#" class="w3-bar-item w3-button">SomeLink3</a> 
     <a href="#" class="w3-bar-item w3-button">SomeLink4</a> 
    </div> 
</div> 
<script type="text/javascript"> 
    function clickDrp(){ 
     var x = document.getElementById("cont"); 
     if(x.className.search("w3-show") == -1) 
      x.className += " w3-show"; 
     else 
      x.className = x.className.replace(" w3-show",""); 
    } 
</script> 

두 번째 드롭 다운 메뉴는 정상적으로 작동합니다. x가 글로벌 변수가 된 경우에도 처음에는 그렇지 않습니다.

저는 javascript에 익숙하지 않아 그 이유를 알 수 없습니다. 누군가 추론 할 수 있습니까?

PS : 나는 첫 번째 변형에서 W3-CSS를

Answer 1

를 사용했습니다 당신의 변수 x가 className 문자열의 복사본입니다. x으로 변경하면 해당 변수가 변경되고 원래 className 속성 값은 변경되지 않습니다.

두 번째 변형에서 변수 x은 getElementById이 반환하는 개체 참조의 복사본입니다. x에 새 값을 지정하지 않으면 DOM 객체를 가리 킵니다. 이 x (즉, 해당 속성 중 하나에 할당 됨, 예 : className)으로 완료되면 DOM 객체에 영향을 미치므로 효과가 웹 문서에 표시됩니다.

Answer 2

질문이 올바르게 표시되지 않았습니다. 여기에 문제의 간단한 예입니다

x = document.getElementById(“id”); 
x.className = ...; 

x = document.getElementById(“id”).className; 
x = ...; 

및

사이의 차이는 다음과 같습니다

// Case 1 
var a = { foo: "bar" }; 
var b = a.foo; 
b += "baz"; 
console.log(a.foo); // "bar" 
console.log(b); // "barbaz" 

// Case 2 
var a = { foo: "bar" }; 
var b = a.foo; 
a.foo += "baz"; 
console.log(a.foo); // "barbaz" 
console.log(b); // "bar" 

할당 a.foo += "baz";가에, a.foo = a.foo + "baz";와 같은 의미, 또는 당신의 사례 :

x.className = x.className + " w3-show"; 

+= operator을 사용하여 새 문자열을 만든 다음 해당 문자열을 x.className에 할당했습니다. 이것은 x의 속성 "className"이 문자열 값 "bar"(more on object properties)에 대한 객체의 속성 맵에있는 키라는 사실에서 유래합니다.