html - Hide DIVs with the same name using Javascript - Stack Overflow

admin管理员组

文章数量:1410717

I want to hide all divs with the name "mask"

This is my 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>

I tried to hide "mask" by using the JS code below but it didn't work for all divs, just for the first one.

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

Is there a way to hide them all by using pure Javascript. No jQuery.

I want to hide all divs with the name "mask"

This is my 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>

I tried to hide "mask" by using the JS code below but it didn't work for all divs, just for the first one.

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

Is there a way to hide them all by using pure Javascript. No jQuery.

• javascript
• html

Share Improve this question Follow asked Oct 1, 2013 at 22:26 kalpetroskalpetros 98333 gold badges1616 silver badges3535 bronze badges 2

• 8 duplicate ID not allowed in HTML. Use class instead. – greener Commented Oct 1, 2013 at 22:27
• 3 An ID has to be unique. – jantimon Commented Oct 1, 2013 at 22:27

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

You shouldn't be using duplicate ID's in HTML, consider changing it to a class.

If you change id="mask" to class="mask", then you can do:

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

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

Or for browsers still in the stone age (IE7 and below), you can do:

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

The id attribute must be unique per document. You can do what you want with a class, perhaps. So you would have multiple divs like so:

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

Then you can do:

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

You cannot assign same ID more than once.

But you can add an attribute class to div with id "mask" E.g.:

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

And select all elements by this class:

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

本文标签： htmlHide DIVs with the same name using JavascriptStack Overflow