如何使用javascript在一段时间后将css显示从可见更改为不可见答案

【问题标题】：How to change css display from visible to not visible after a certain time using javascript如何使用javascript在一段时间后将css显示从可见更改为不可见
【发布时间】：2019-01-25 11:38:25
【问题描述】：

我想将 DOM 对象的 css 显示属性设置为“阻塞”2 秒，然后在 2 秒后将其设置回“无”。这怎么能只用javascript来完成？我对此真的很陌生，所以还没有真正得到 jquery。

我试过了

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

然后设置为

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

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

【问题讨论】：

标签： javascript html css function display

【解决方案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);
}

【讨论】：

() => { // code } 是 JavaScript ES6 规范中引入的 function() { // code } 的简写。它用于解决经典问题，因此是“this”范围。但既然在这里没关系，你可以使用两者中的任何一个。 @PumpkinBreath
@PumpkinBreath 检查this
非常感谢
@PumpkinBreath 很高兴为您提供帮助 :)

【解决方案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);

【讨论】：

【解决方案3】：

您可以使用setTimeout 执行以下操作。我想默认情况下 div 是可见的，所以我不必显示它。

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

&lt;div class="one-rolled-popup"&gt;Testing&lt;/div&gt;

但如果默认情况下它是隐藏的，你可以这样做（点击 sn-p 中的屏幕查看效果）：

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

&lt;div class="one-rolled-popup"&gt;Testing&lt;/div&gt;

【讨论】：