删除启动时失败 javascript 的 div

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() 方法 returns 所有子元素的类数组对象，它具有所有给定的 class 名称和你当 style 是 HTMLElement 的属性时，正在尝试在返回的 array-like 对象上调用 style 属性。

我建议在这种情况下使用 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

Removing divs with javascript failure at startup

javascript

css

visibility