Div 스타일이 정의되지 않았습니다 (자바 스크립트)

Question

이 스크립트는 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> 

하지만 div.style은 정의되지 않았습니다. 왜? :)

Answer 1

for-in 루프의 모든 요소가 DOM 요소인지 확인하십시오. 그것은 hasOwnProperty()와 for-in 루프를 필터링하는 좋은 방법입니다 :

 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"; 
     } 

편집이 : 개체 속성을 통해 루프에 사용되는 루프에 대한

Answer 3

와

for(var div in divs) { 

교체

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

divs의 결과 인 getElementsByClassName은 실제로 배열이 아니라 배열과 유사한 객체 인 NodeList이며 요소가 아닌 해당 속성을 반복하고 있습니다.

Answer 4

for-in 루프를 사용하지 마십시오.

document.getElementsByClassName('someClass') 

는 Array.prototype에서 상속하지 않는 NodeList을 반환하지만, 몇 가지 측면에서 유사하다. 이름과 마찬가지로 노드 목록입니다.

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

을 그리고 여기 당신이 실제로 요소를 숨기는 방법입니다 : 이것은이 length 속성이 있습니다 만 사용하여 액세스 할 수 있어야 의미합니다.

/** 
* 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.