자바 스크립트에서 ID를 클래스로 변경하는 방법

Question

자바 스크립트를 ID에서 클래스로 변경하려면 어떻게해야합니까? 나는 혼자서하려고했지만 운이 없다면, 이것이 결국 내가 끝내는 것이다. 원래 코드는 요소를 표시하거나 숨기고 사용자 선택을 기억하는 것이 었습니다.

HTML :

이

<div class="popup" style="display:none"> 
    <img src="image-url.jpg" alt="alt text" title="title text"> 
</div> 

JAVASCRIPT :

function setCookie (name, value, expires, path, domain, secure) { 
    document.cookie = name + "=" + escape(value) + 
    ((expires) ? "; expires=" + expires : "") + 
    ((path) ? "; path=" + path : "") + 
    ((domain) ? "; domain=" + domain : "") + 
    ((secure) ? "; secure" : ""); 
} 

function getCookie (name) { 

    var cookie = " " + document.cookie; 
    var search = " " + name + "="; 
    var setStr = null; 
    var offset = 0; 
    var end = 0; 

    if (cookie.length > 0) { 
     offset = cookie.indexOf(search); 

     if (offset != -1) { 
      offset += search.length; 
      end = cookie.indexOf(";", offset); 

      if (end == -1) { 
       end = cookie.length; 
      } 

      setStr = unescape(cookie.substring(offset, end)); 
     } 
    } 

    if (setStr == 'false') { 
     setStr = false; 
    } 

    if (setStr == 'true') { 
     setStr = true; 
    } 

    if (setStr == 'null') { 
     setStr = null; 
    } 

    return(setStr); 
} 

function hidePopup() { 
    setCookie('popup_state', false); 
    document.getElementsByClassName('popup').style.display = 'none'; 
} 

function showPopup() { 
    setCookie('popup_state', null); 
    document.getElementsByClassName('popup').style.display = 'block'; 
} 

function checkPopup() { 
    if (getCookie('popup_state') == null) { 
     // if popup was not closed 
     document.getElementsByClassName('popup').style.display = 'block'; 
    } 
} 

Answer 1

document.getElementsByClassName 다시 NodeList를 당신을 제공합니다. NodeList에는 style 속성이 없으므로 ... 모두가 length이고 목록에있는 각 노드의 색인입니다.

발견 된 모든 popup의 스타일을 설정하려면 NodeList를 반복해야합니다. 예를 들어 :

function showPopups() { 
    setCookie('popup_state', null); 
    var popups = document.getElementsByClassName('popup'); 
    for (var i = popups.length - 1; i >= 0; --i) { 
     popups[i].style.display = ''; 
    } 
} 

은 물론,이를 숨기기 위해, 대신 displaynone에 설정할 것입니다.

변경해야 할 요소가 하나 뿐인 경우 (1) ID를 사용하지 않는 이유는 무엇입니까? :) (2) 하나의 요소에 액세스하려면 document.getElementsByClassName('popup')[0]이라고 말할 수 있습니다. 하지만 ... 하나 이상을 가지고 있다면, 첫 번째 방법 만 바꾸면됩니다.