Styl Div jest niezdefiniowany (Javascript)

Question

Znalazłem ten skrypt w stackoverflow.

function showhide(id){ 
     if (document.getElementById) { 
      var divid = document.getElementById(id); 
      var divs = document.getElementsByClassName("hideable"); 
      for(var div in divs) { 
      div.style.display = "none"; 
      } 
      divid.style.display = "block"; 
     } 
     return false; 
     } 

<a href="#" onclick="showhide('features');" >features</a> 
<a href="#" onclick="showhide('design');" >design</a> 
<a href="#" onclick="showhide('create');" >create</a> 

<div class="hideable" id="features">Div 1</div> 
<div class="hideable" id="design">Div 2</div> 
<div class="hideable" id="create">Div 3</div> 

ale mówi, div.style niezdefiniowane. Czemu? :)

Answer 1

Upewnij się, że wszystkie elementy w Twojej pętli for-in są elementami DOM. Jest to dobrą praktyką filtr for-in pętlę o hasOwnProperty():

 for(var div in divs) { 
      if (divs.hasOwnProperty(div)) { 
       if (div && div.style) { 
        div.style.display = "none"; 
       } 
      } 
     } 

Answer 2

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

Edycja: w pętli stosuje pętli właściwości obiektu

Answer 3

wymienić

for(var div in divs) { 

z

for(var i=0; i<divs.length;i++) { 
    var div = divs[i]; 

divs, wynik getElementsByClassName, tak naprawdę nie jest tablicą, ale NodeList, obiektem podobnym do tablicy, a ty wykonywałeś iteracje na jego właściwościach, a nie na elementach.

Answer 4

Nigdy nie należy używać do tego pętli wejścia.

document.getElementsByClassName('someClass') 

zwraca NodeList, które nie dziedziczą z Array.prototype, ale podobnie jest w niektórych aspektach. Jest to lista węzłów, tak jak mówi nazwa. Oznacza to, że ma właściwość length i powinny być dostępne tylko przy użyciu:

var myElements = document.getElementsByClassName('yourClass'); 
for (var i = 0, ii = myElements.length; i < ii; i++) { 
    console.dir(myElements[i].style); 
}; 

A oto jak należy właściwie ukryć element.

/** 
* Shows or hides an element from the page. Hiding the element is done by 
* setting the display property to "none", removing the element from the 
* rendering hierarchy so it takes up no space. To show the element, the default 
* inherited display property is restored (defined either in stylesheets or by 
* the browser's default style rules.) 
* 
* Caveat 1: if the inherited display property for the element is set to "none" 
* by the stylesheets, that is the property that will be restored by a call to 
* showElement(), effectively toggling the display between "none" and "none". 
* 
* Caveat 2: if the element display style is set inline (by setting either 
* element.style.display or a style attribute in the HTML), a call to 
* showElement will clear that setting and defer to the inherited style in the 
* stylesheet. 
* @param {Element} el Element to show or hide. 
* @param {*} display True to render the element in its default style, 
* false to disable rendering the element. 
*/ 
var showElement = function(el, display) { 
    el.style.display = display ? '' : 'none'; 
}; 

var myElement = document.getElementById('someID'); 
showElement(myElement, false);// it should now be hidden.