Question

我正在尝试在没有jQuery的情况下创建一个后备，因为我有一个div＆＃39; container＆＃39;和样式display: none

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

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

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

以下尝试都没有奏效：

一起使用[0]节点选择：

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

所有在一起，没有[0]，因为我想要设置所有（1）的样式具有类名＆＃34;容器＆＃34;：

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

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

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

N.B。我知道在SO上有很多这种性质的问题，但是我的不同之处在于我只有一个元素正在尝试选择，所以我宁愿不循环使用它们。

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

未捕获的TypeError：无法读取属性＆＃39; style＆＃39;未定义的（匿名函数）

而且，当我在每个实例中console.log时，它表示他们已经undefined

Answer 1

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

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

将非jQuery代码添加到window.onload事件处理程序，或者只是将脚本中的脚本移动到比您希望它选择的元素更低的位置。在结束之前</body>是需要整个文档在DOM中可用的脚本的常见位置。

Answer 2

尝试将代码包装在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>

Answer 3

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

document.getElementsByClassName（）无法正常工作

3 个答案: