javascript getElementsByClassName() 总是不返回？答案

【问题标题】：javascript getElementsByClassName() always returns none?javascript getElementsByClassName() 总是不返回？
【发布时间】：2011-07-07 23:29:38
【问题描述】：

我想为我的浏览器创建最简单的书签。

javascript:document.getElementsByClassName('source').style.visibility='visible';

我体内有多个 div.source。默认情况下，它们使用 css 设置为 .source { display:none; }。

我的控制台告诉我：Uncaught TypeError: Cannot set property 'display' of undefined

当我单击书签时，所有 .source div 都应该可见。我在这里做错了什么？

【问题讨论】：

标签： javascript element selector

【解决方案1】：

您可能需要循环遍历结果，如下所示：

var divs = document.getElementsByClassName('source');
for(var i=0; i<divs.length; i++) { 
  divs[i].style.display='block'
}

正如@ionoy 提到的，使用display 属性。我希望这会有所帮助。

http://jsfiddle.net/erick/rb7bn/1/

【讨论】：

javascript:(function() { var divs = document.getElementsByClassName('source');for(var i=0; i
forEach 可能更干净一些。 document.getElementsByClassName('source').forEach(function (elem) {elem.style.display = 'block'})（或none，当谈到所有那些恼人的动画节日雪花博客现在都在运动时）

【解决方案2】：

有“可见性”，也有“展示”。他们是完全不同的野兽。

W3 学校：

visibility

display

【讨论】：

这不会改变任何事情。我的控制台告诉我：Uncaught TypeError: Cannot set property 'display' of undefined

【解决方案3】：

去display。它适用于许多浏览器并且在许多情况下都可以正常工作。

【讨论】：

关闭“可见性”与将不透明度设置为零的行为相同：内容变得不可见，而布局不改变；或者以不同的方式说同样的事情，现在有一个空白区域。这几乎不是你想要的。另一方面，关闭“显示”会导致回流/重新布局，就好像该元素根本不再存在一样。它所在的空间将被关闭。这几乎总是你想要的。两者都是 CSS 的标准部分——浏览器支持不是问题。使用能够产生应用程序所需行为/外观的那个。