document.getElementsByClassName()不起作用

Question

我试图在没有jQuery的情况下创建一个后备,因为我有一个带有"容器"类和样式的div display: none

我对fadeIn()这个div 使用jquery来创建页面(重新)加载的淡入淡出效果(我知道有更好的方法来做到这一点,但是我想这样做.)

但是,如果缺少jQuery,(!window.jQuery)我正在创建一个JavaScript解决方案,以使我的页面可见.

但document.getElementsByClassName()到目前为止,我的使用尝试失败了,并且总是返回'undefined',
我知道我可以循环使用它们,但这似乎有点OTT用于定位一个元素.

以下尝试都没有奏效:

1. 所有这些,[0]节点选择:

   document.getElementsByClassName("container")[0].style.display = "block";
   

2. 所有在一起,没有[0],因为我想用类名"容器"来设置所有(1)元素的样式:

document.getElementsByClassName("container").style.display = "block";

3. 设置为变量,然后取[0]节点并设置样式*

   var container = document.getElementsByClassName("container");
   container[0].style.display = "block";
   

NB我知道在SO上存在很多这种性质的问题,但是我的不同之处在于我只想选择一个类的元素,所以我宁愿不循环使用它们.

控制台抛出以下错误消息:

未捕获的TypeError:无法读取未定义的属性"样式"(匿名函数)

而且当我console.log在每个例子中,它说它们是undefined

Answer 1

您最有可能在类的元素container存在之前运行该代码.

你的jQuery可能有效,因为你在$(document).ready回调中有它(这$( function( ) { ...是一种常见的方法).

将非jQuery代码添加到window.onload事件处理程序中,或者只是将脚本移动到HTML中,而不是要将其选择的元素.在关闭之前</body>是脚本的常见位置,需要整个文档在DOM中可用.