Div 样式未定义（Javascript）

Div style is undefined (Javascript)

提问by user1632298

I found this script in stackoverflow.

我在 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>

But it says, div.style undefined. Why? :)

但它说， div.style 未定义。为什么？:)

回答by flavian

You should never use a for-in loop for that.

你永远不应该为此使用 for-in 循环。

document.getElementsByClassName('someClass')

returns a NodeList, which doesn't inherit from Array.prototype, but it is similar in some aspects. It's a list of nodes, just like the name says. This means it has a lengthproperty and should only be accessed using:

返回一个NodeList，它不继承自Array.prototype，但在某些方面是相似的。它是一个节点列表，正如名字所说。这意味着它有一个length属性，只能使用以下方式访问：

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

And here is how you should actually hide an 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.

回答by karaxuna

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

EDIT: for in loops are used to loop through object properties

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

回答by Denys Séguret

Replace

代替

for(var div in divs) {

with

和

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

divs, the result of getElementsByClassName, isn't really an array but a NodeList, an array-like object and you were iterating on its properties, not its elements.

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

回答by FARHAD AFSAR

in javascript for(var div in divs) do not act like foreach. in this case 'div' is index. so the element should be: divs[div]

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

回答by Artur

The days, with IE no longer supported by many webapps, using for ... ofloopis exactly what you were looking for at the time:

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

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

回答by Konstantin Dinev

Make sure all the elements in your for-inloop are DOM elements. It's a good practice to filter for-inloop with a hasOwnProperty():

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

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