JSで特定の要素を数秒後に非表示にしたり表示したりする方法【HTML,CSS,JavaScript】
JavaScriptとCSSを用いて、特定のHTML要素を指定時間後に表示・非表示させる方法を解説。`setTimeout`と`classList`を利用した具体的なコード例を紹介します。
JavaScript (JS) と CSSを上手く利用して、特定の要素を数秒後に表示したり、非表示にしたり出来るようにコードを書きました。
分かりやすい記事があまり無かったので、ここに置いておきます。
以下より紹介するコードでは、最初にshow-firstという要素を表示し、3秒後にはそれを非表示にします。それと同時にshow-laterという要素を表示します（最初は非表示）。
まとめコード
まずは動く全体のコードを紹介します。
<head>
<style>
.d-none {
display: none;
}
</style>
</head>
<body>
<h1>表示・非表示テスト</h1>
<p id="show-first">最初に表示される（3秒後に非表示）</p>
<p id="show-later" class="d-none">最初は非表示（3秒後に表示される）</p>
<script>
// 表示・非表示を切り替える要素を取得
const showFirst = document.getElementById("show-first");
const showLater = document.getElementById("show-later");
// 表示・非表示を切り替える関数
function switchDisplay() {
showFirst.classList.add("d-none");
showLater.classList.remove("d-none");
}
// 上記関数を3秒後に実行
setTimeout(() => {
switchDisplay();
}, 3000);
</script>
</body>HTML, CSS, JSのそれぞれ、順を追って説明していきます。
HTMLにはidとclassを付与しておく
<h1>表示・非表示テスト</h1><p id="show-first">最初に表示される（3秒後に非表示）</p><p id="show-later" class="d-none">最初は非表示（3秒後に表示される）</p>CSSではclassにdisplay: none; を当てるクラスを用意
.d-none {
display: none;
}JavaScriptでは数秒後に2つのメソッドを実行する
2つのメソッドclassList.add() および classList.remove() を実行することでclassを追加したり削除したりします。
// 表示・非表示を切り替える要素を取得
const showFirst = document.getElementById("show-first");
const showLater = document.getElementById("show-later");
// 表示・非表示を切り替える関数
function switchDisplay() {
showFirst.classList.add("d-none");
showLater.classList.remove("d-none");
}
// 上記関数を3秒後に実行
setTimeout(() => {
switchDisplay();
}, 3000);