JavascriptでIDをクラスに変更するには

Question

IDからクラスにjavascriptを変更するにはどうしますか？私は私自身でそれをやろうとしましたが、運がないと、これが私の結末です。元のコードは、要素を表示または非表示にし、ユーザーの選択を覚えていました。

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つしかないことがわかっている場合は、（1）IDを使用していないのはなぜですか？ :)（2）あなたはただ一つの要素にアクセスするためにdocument.getElementsByClassName('popup')[0]と言うことができます。しかし、もしあなたが複数のものを持っていれば、最初のものだけを変更するでしょう。