Как изменить отображение CSS с видимого на невидимое через определенное время, используя JavaScript

Question

Я хочу установить свойство отображения css для объектов DOM в значение «block» на 2 секунды, а затем через 2 секунды установить его обратно в «none».Как это можно сделать только в javascript?Я действительно новичок в этом, поэтому пока не получаю JQuery.

Я попробовал

document.querySelector(".one-rolled-popup").style.display = "block";

, а затем установил

document.querySelector(".one-rolled-popup").style.display = "none";

после некоторых другихоперации, но это просто скрывает это

Answer 1

Вы можете сделать следующее, используя setTimeout.Я полагаю, что по умолчанию div является видимым, поэтому мне не нужно его показывать.

setTimeout(
  function() {
    document.querySelector(".one-rolled-popup").style.display = "none";
  }, 2000);

<div class="one-rolled-popup">Testing</div>

Но если он скрыт по умолчанию, вы можете сделать это вместо этого (нажмите на экран во фрагменте, чтобы увидеть эффект):

function showAndHide() {
  document.querySelector(".one-rolled-popup").style.display = "block";
  setTimeout(
    function() {
      document.querySelector(".one-rolled-popup").style.display = "none";
    }, 2000);
}



window.onclick = function() {
  showAndHide();
}

.one-rolled-popup {
  display: none;
}

<div class="one-rolled-popup">Testing</div>

Answer 2

Попробуйте эту функцию

   setTimeout(function(){ 
   if (document.querySelector(".one-rolled-popup").style.display == "block";) {
      document.querySelector(".one-rolled-popup").style.display= "none";
   } else {
      document.querySelector(".one-rolled-popup").style.display= "none";
   }

  }, 3000);

Answer 3

используйте setTimeout.Он выполнит метод через X миллисекунд.Таким образом, в вашем случае вы отобразите блок, а затем вернете его в неиспользуемое состояние через 2 секунды.

method () {
  // display it
  document.querySelector(".one-rolled-popup").style.display = "block";

  // hide it after 2 seconds
  setTimeout(() => {
      document.querySelector(".one-rolled-popup").style.display = "none",
  2000);
}