document.getElementsByClassName() 不工作

Question

我正在尝试在没有 jQuery 的情况下创建后备，因为我有 div 和 class 'container' 以及样式 display: none

我使用 jquery 到 fadeIn() 这个 div，在页面（重新）加载时创建淡入淡出效果（我知道有更好的方法可以做到这一点，但我会喜欢这样做。）

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

但是我尝试使用 document.getElementsByClassName() 到目前为止都失败了，并且总是 return 'undefined'
我知道我可以遍历它们，但这对于定位 one 元素来说似乎有点 OTT。

None 以下尝试已成功：

全部一起，有[0]个节点selection:

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

一起，没有 [0]，因为我想为所有 (1) 名称为 class 的元素 "container":

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

设置为变量，然后获取 [0] 节点并为其设置样式*

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

N.B。我知道在 SO 上有很多这种性质的问题，但是我的不同，因为只有一个元素 class 我正在尝试 select，所以我不想循环遍历它们。

控制台抛出以下错误信息：

Uncaught TypeError: Cannot read property 'style' of undefined(anonymous function)

而且当我在每个实例中 console.log 他们时，它说他们是 undefined

Answer 1

您可以使用 document.querySelector(".container")，它将自动为您 select 节点列表中的第一项。

Answer 2

您很可能运行 class container 的元素之前的代码存在。

您的 jQuery 可能有效，因为您在 $(document).ready 回调中使用了它（$( function( ) { ... 是执行此操作的常用方法）。

将您的非 jQuery 代码添加到 window.onload 事件处理程序，或者简单地将您的脚本移动到 HTML 中低于您想要它的元素 select。就在结束之前 </body> 是脚本的常见位置，这些脚本要求整个文档在 DOM.

中可用

Answer 3

尝试将代码包装在 onload 函数中：

window.onload=function(){
    // Your JS code goes here
}

或者，将您的 JS 代码放在 HTML 正文的最底部。

<html>
    <head>
        <!-- Start of head section -->
        <!-- Your HTML head content goes here -->
        <!-- End of head section -->
    </head>
    <body>
        <!-- Start of body section -->
        <!-- Your HTML body content goes here -->
        <!-- End of body section -->
        <script type='text/javascript'>
            // Your JS code goes here
        </script>
    </body>
</html>

document.getElementsByClassName() 不工作

document.getElementsByClassName() not working

javascript

jquery

getelementsbyclassname