Удаление div с ошибкой JavaScript при запуске - PullRequest
0 голосов
/ 29 августа 2018

У меня есть этот 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 там.

Ответы [ 3 ]

0 голосов
/ 29 августа 2018

Добавьте display: none; в div либо в вашем CSS:

.container2 {
    display: none;
}

Или непосредственно в элементе:

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

Это полностью скрывает div до тех пор, пока значение display не изменится.


Затем используйте JavaScript, чтобы отобразить его позже:

document.getElementsByClassName("container2")[0].style.display = "block";
0 голосов
/ 29 августа 2018

Вы не можете изменить DOM, пока он не завершит загрузку с помощью этой функции.

У вас есть два варианта.

Вы можете добавить в свой CSS:

.container2{display:none}

А затем сделайте его видимым, когда будут выполнены определенные условия.

Или вы можете дождаться полной загрузки DOM с помощью функции jQuery ready (), а затем выполнить вашу функцию.

$( document ).ready(function() {
    console.log( "ready!" );
    $('.container2').css("display","none");
});
0 голосов
/ 29 августа 2018

Метод 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...