JavaScript的getElementsByClassName()总是返回none？

Question

我想要为我的浏览器创建最简单的书签小工具。

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

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

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

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

- matt

Answer 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/

- erickb

---

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

forEach可能会更加简洁。document.getElementsByClassName('source').forEach(function (elem) {elem.style.display = 'block'})（或者在所有那些烦人的动画假日雪花博客出现时为none）。 - ruffin

Answer 2

永远不要迭代实时HTML集合。这是极其低效的，因为每次访问实时集合的成员（包括长度）时，浏览器都会遍历整个文档以查找特定元素。请参见此处。

以下是高效的解决方案：

let divs = [...document.getElementsByClassName('source')];
divs.forEach(divEl => {
  divEl.style.display='block'
}

使用[...HTMLcollection]前缀将HTMLcollection转换为数组，然后您可以迭代它。

- lior bakalo

Answer 3

有“visibility”和“display”两个概念，它们是完全不同的东西。

W3Schools：

visibility

display

- ionoy

---

什么都没有改变。我的控制台告诉我：“未捕获的类型错误：无法设置未定义的属性'display'”。 - matt

Answer 4

使用display。它在许多浏览器和情况下都能正常工作。

- Dinesh

---

将“visibility”关闭的行为与将不透明度设置为零相同：内容变得不可见，而布局不会改变；或者换句话说，现在有一个空白的空间。这几乎永远不是您想要的。另一方面，关闭“display”会导致重新流动/重新布局，就好像元素根本不存在。它所在的空间将被关闭。这几乎总是您想要的。两者都是CSS的标准部分-浏览器支持不是问题。使用能够产生所需行为/应用程序外观的方法。 - Chuck Kollars