與使用Javascript

Question

我想隱藏的所有div名爲「面具」

相同的名稱隱藏的DIV這是我HTML：

<div id="first"> 
<div id="firsttest"></div> 
    <div class="one onehelp"> 
    <div id="mask"> 
    <div id="onetip"></div> 
    </div> 
    <div id="Div5"></div> 
    <div id="resultone"></div> 
    </div> 
    <div class="two twohelp"> 
    <div id="mask"> 
    <div id="twotip"></div> 
    </div> 
    <div id="Div6"></div> 
    <div id="resulttwo"></div> 
    </div> 
    <div class="three threehelp"> 
    <div id="mask"> 
    <div id="threetip"></div> 
    </div> 
    <div id="Div7"></div> 
    <div id="resultthree"></div> 
    </div> 
</div> 

我試圖隱瞞「面具」通過使用下面的JS代碼，但它並不適用於所有的div，只是第一個。

var hidemask = document.getElementById("mask"); 
hidemask.style.display = "none"; 

有沒有辦法通過使用純Javascript來隱藏它們。沒有jQuery。

Answer 1

您不應該在HTML中使用重複ID，請考慮將其更改爲類。

如果更改id="mask"到class="mask"，那麼你可以做：

var hidemask = document.querySelectorAll(".mask"); 

for (var i = 0; i < hidemask.length; i++) { 
    hidemask[i].style.display = "none"; 
} 

或爲瀏覽器仍處於石器時代（IE7及以下），你可以這樣做：

var elems = document.getElementsByTagName('*'), i; 
    for (i in elems) { 
     if((' ' + elems[i].className + ' ').indexOf(' ' + 'mask' + ' ') > -1) { 
      elems[i].style.display = "none"; 
     } 
    } 

Answer 2

的id每個文檔的屬性必須是唯一的。也許你可以用class做你想做的事。所以，你會擁有多個div就像這樣：

<div id="something" class="mask"></div> 

然後，你可以這樣做：

var divsWithMask = document.querySelectorAll(".mask"); 
for(var i = 0; i < divsWithMark.length; i++) { 
    divsWithMak[i].style.display = "none"; 
} 

Answer 3

您不能分配相同的ID不止一次。

但是你可以通過這個類添加一個屬性類ID來格「面具」例如爲：

<div id="mask-or-something-else" class="mask">...</div> 

並選擇所有元素：

var hidemask = document.getElementsByClassName("mask"); 
for(i = 0; i < hidemask.length; i++) 
    hidemask[i].style.display = "none";