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

JSで特定の要素を数秒後に非表示にしたり表示したりする方法【HTML,CSS,JavaScript】

まとめコード

HTMLにはidとclassを付与しておく

CSSではclassにdisplay: none; を当てるクラスを用意

JavaScriptでは数秒後に2つのメソッドを実行する

On this page