如何使用 javascript 在特定时间后将 css 显示从可见更改为不可见

Question

我想设置一个 DOM 对象 css 显示属性到 'block' 2 秒，然后在 'none' 2秒。这怎么能在 javascript 内完成？我对此很陌生，所以还没有真正了解 jquery。

我试过了

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

然后设置为

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

经过一些其他操作，但这只是完全隐藏它

Answer 1

使用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);
}

Answer 2

您可以使用 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 3

试试这个功能

   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);

如何使用 javascript 在特定时间后将 css 显示从可见更改为不可见

How to change css display from visible to not visible after a certain time using javascript

html

javascript

css

function

display