Div风格未定义（Javascript）

我在stackoverflow中找到了此脚本。Div风格未定义（Javascript）

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未定义。为什么？ :)

来源

2013-01-15 user1632298

在哪些浏览器？ –

你正在使用哪个浏览器？ – Pranav

最新FF，17.0.1 – user1632298

-1

确保一切都在你for-in回路的元素是DOM元素。这是一个很好的做法，过滤for-in循环用hasOwnProperty()：

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

来源

2013-01-15 09:58:00

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

编辑：为循环通过对象属性用于循环

来源

2013-01-15 09:58:36 karaxuna

更换

for(var div in divs) {

与

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

divs，的getElementsByClassName的结果，是不是一个真正的数组，但一个节点列表，阵列状物体和你迭代上它的属性，而不是它的元件。

来源

2013-01-15 09:59:29

你不应该一个for-in循环的使用。

document.getElementsByClassName('someClass')

返回NodeList，不从Array.prototype继承，但它在某些方面类似。这是一个节点列表，就像名称所示。这意味着它有一个length性能，应该只使用访问：

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

这里是你应该如何真正隐藏的元素。

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

来源

2013-01-15 10:01:42 flavian

Div风格未定义（Javascript）

回答

相关问题