如何在 setTimeOut() 完成后删除背景？答案

【问题标题】：How do I remove the background after setTimeOut() is complete?如何在 setTimeOut() 完成后删除背景？
【发布时间】：2022-12-17 22:49:12
【问题描述】：

在没有填充、高度或宽度的情况下，内容会在 5000 时间后消失。但是一旦我包含以下任何属性，背景在 setTimeOut() 之后仍然存在，只有文本消失。我怎样才能解决这个问题？你可以运行我的代码看看我的意思。

const msg = "Welcome";
document.getElementById("alarmmsg").innerHTML = msg;

setTimeout(function(){
document.getElementById("alarmmsg").innerHTML = '';
}, 4000);

.Javascript-Message-disappears-1{
    width: 100px;
    height: auto;
    background-color: crimson;
    text-align: center;
    position: absolute;
    top: calc(100vh - 70px);
    padding: 20px;
    box-sizing: border-box;
}

<body>
        <div class="Javascript-Message-disappears-1" id="alarmmsg"></div>
        
</body>

【问题讨论】：

在您的 setTimeout() 中，从元素中删除设置背景样式的类以及消息更新
或者您可以将其添加到您的 setTimeOut 中... document.getElementById("alarmmsg").style.backgroundColor = 'none'
除了删除 innerHTML，您还可以使用 document.getElementById("alarmmsg").style.display = 'none'; 进行渲染，就好像该元素不存在一样
@mykaf 我能看看你是怎么做到的吗？我正在尝试上面的两种方法，但都没有用
@kazmi066 我能看看你是怎么做到的吗？我正在尝试上面的两种方法，但都没有用。仍然需要有背景，但它需要随着 setTimeOut() 消失

标签： javascript html css

【解决方案1】：

您有什么理由不能执行以下操作吗？

const alarm = document.getElementById("alarmmsg");

setTimeout(function () {
  alarm.innerHTML = "";
  alarm.style.background = "none";
}, 4000);

或者，如果您需要删除元素：

const alarm = document.getElementById("alarmmsg");

setTimeout(function () {
  alarm.style.display = "none";
}, 4000);

我假设是因为这是一条“欢迎”消息，您不需要在重新加载页面之前再次打开该消息。

【讨论】：

【解决方案2】：

在 setTimeout() 中从元素中删除设置背景样式的类以及消息更新

const msg = "Welcome";
document.getElementById("alarmmsg").innerHTML = msg;

setTimeout(function(){
    document.getElementById("alarmmsg").innerHTML = '';
    document.getElementById("alarmmsg").classList.remove("Javascript-Message-disappears-1");
}, 4000);

.Javascript-Message-disappears-1{
    width: 100px;
    height: auto;
    background-color: crimson;
    text-align: center;
    position: absolute;
    top: calc(100vh - 70px);
    padding: 20px;
    box-sizing: border-box;
}

        <div class="Javascript-Message-disappears-1" id="alarmmsg"></div>

【讨论】：

【解决方案3】：

试试这个，这样你就可以从 DOM 中完全删除元素：

const msg = "Welcome";
document.getElementById("alarmmsg").innerHTML = msg;

setTimeout(function() {
  document.getElementById("alarmmsg").remove();
}, 4000);

.Javascript-Message-disappears-1 {
  width: 100px;
  height: auto;
  background-color: crimson;
  text-align: center;
  position: absolute;
  top: calc(100vh - 70px);
  padding: 20px;
  box-sizing: border-box;
}

&lt;div class="Javascript-Message-disappears-1" id="alarmmsg"&gt;&lt;/div&gt;

【讨论】：