javascript - 如何在页面加载后的特定时间添加和删除 HTML 类？

Question

我正在尝试在页面加载几秒钟后向 HTML 元素 (ID bland-html-element) 添加和删除 HTML 类 (.flashy-design)。

我下面的尝试没有注入(inject)类。

setTimeout(function() {
    function addFlashyDesign() {
        var element = document.getElementById("bland-html-element");
        element.classList.add("flashy-design");
    }
}, 3000);

或

function startDelay(){
    setTimeout(function() {
        function addFlashyDesign() {
            var element = document.getElementById("bland-html-element");
            element.classList.add("flashy-design");
        }
    }, 3000);
};

window.onload = "startDelay();";

想法？

Answer 1

解释在代码中。您犯的主要错误是没有按应有的方式使用回调函数。

let element = document.getElementById("bland-html-element");

// show after 2 seconds
// RECOMMENDATION: use window.setTimeout instead of setTimeout
// NOTE: use a callback function, not an embedded named function
window.setTimeout(function() {
     element.classList.add("flashy-design");
}, 2000);

// hide after 3 seconds
window.setTimeout(function() {
     element.classList.remove("flashy-design");
}, 3000);

#bland-html-element{
  height: 200px;
  width: 200px;
  background-color: green;
  display: none;
}
#bland-html-element.flashy-design{
  display: block;
}

<div id="bland-html-element"></div>

PS:不要使用window.onload。请改用 window.addEventListener('load', function(){})。在我的示例中，我没有在加载事件之后嵌入它，但是您应该在 DOM 中存在 bland-html-element 之前运行代码，否则您可能会冒着运行代码的风险。