div 样式未定义（Javascript）答案

【问题标题】：Div style is undefined (Javascript)div 样式未定义（Javascript）
【发布时间】：2013-01-15 09:55:26
【问题描述】：

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

【问题讨论】：

你用的是哪个浏览器？？
IE版本小于9不支持该属性

标签： javascript html styles

【解决方案1】：

替换

for(var div in divs) {

与

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

divs，getElementsByClassName 的结果，实际上并不是一个数组，而是一个 NodeList，一个类似数组的对象，您正在迭代它的属性，而不是它的元素。

【讨论】：

【解决方案2】：

你不应该为此使用 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.

【讨论】：

【解决方案3】：

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

编辑：for in 循环用于遍历对象属性

【讨论】：

【解决方案4】：

确保 for-in 循环中的所有元素都是 DOM 元素。使用hasOwnProperty() 过滤for-in 循环是一个好习惯：

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

【讨论】：

【解决方案5】：

在 javascript 中 for(var div in divs) 不像 foreach。在这种情况下，'div' 是索引。所以元素应该是：divs[div]

【讨论】：

【解决方案6】：

在许多 web 应用程序不再支持 IE 的日子里，使用 for ... of loop 正是您当时正在寻找的：

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

【讨论】：