ページの読み込みから数秒後に、HTMLクラス（.flashy-design）をHTML要素（ID bland-html-element）に追加および削除しようとしています。
以下の私の試みはクラスを注入しません。
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();";
アイデア？
説明はコードにあります。あなたが犯した主な間違いは、あなたがすべきようにコールバック関数を使用しなかったことでした。
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(){})代わりに使用してください。私の例では、ロードイベントの後にそれを埋め込みませんでしたbland-html-elementが、DOMに存在する前にコードを実行する必要があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加