Question

我有这个div：

<div class="container2"> 
    <div class="message"> 
         <h1> Bla bla.</h1> 
    </div> 
    <div class="circle"> 
         Animations here 
    </div> 
</div>

我希望它在页面加载时不显示。想法是稍后再提出。所以我有这个JavaScript代码，位于<body>内：

<script>
    document.getElementsByClassName('container2').style.display = "none";
</script>

但是，当页面加载时，div就在那里了。

Answer 1

getElementsByClassName() 方法将返回具有所有给定类名的所有子元素的类似数组的对象，并且您尝试在其上调用style属性当array-like是style的属性时，返回的HTMLElement对象。

在这种情况下，我建议使用querySelector()

document.querySelector('.container2').style.display = "none";

setTimeout(function() {
  document.querySelector('.container2').style.display = "none";
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container2">
  <div class="message">
    <h1> Bla bla.</h1>
  </div>
  <div class="circle">
    Animations here
  </div>
</div>

Answer 2

在您的CSS中将display: none;添加到div：

.container2 {
    display: none;
}

或直接在元素中：

<div class="container2" style="display: none;">

这将完全隐藏div，直到更改display的值为止。

然后使用JavaScript稍后显示它：

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

Answer 3

使用此功能，您无法在DOM完成加载之前对其进行修改。

您有两个选择。

您可以添加CSS：

.container2{display:none}

然后在满足某些条件时将其显示。

或者您可以等待使用jQuery ready（）函数完全加载DOM，然后执行您的函数。

$( document ).ready(function() {
    console.log( "ready!" );
    $('.container2').css("display","none");
});

启动时使用javascript失败删除div

3 个答案: