JSで特定のidを持つ要素にクラスを追加・削除する方法

JavaScriptで特定のidを持つ要素にクラスを追加または削除する方法を紹介します。

実行環境

HTML5
CCS3
Google Chrome: 126.0.6478.62（Official Build） （64 ビット）

準備

前回の記事で作成したクラスを使います。
サイズ、色、枠線は任意のものに変更してください。

<div class="main-content">
    <div class="button" id="add">add</div>
    <div class="button" id="remove">remove</div>
    <div class="button" id="target">target</div>
</div>

.main-content {
  display: flex;
  justify-content: space-evenly;
}

.button {
  width: 100px;
  height: 50px;
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  background: palegreen;
}

.highlight {
  position: relative;
}

.highlight::before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  display: block;
  border: 5px solid salmon;
  /* 2秒ごとに繰り返し */
  animation: blink 2s ease infinite;
}

/* 点滅アニメーション */
@keyframes blink {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

実装

今回は、idがaddのボタンを押すとidがtargetの要素にhighlightクラスを追加し、idがremoveのボタンを押すとidがtargetの要素からhighlightクラスを削除するJavaScriptを実装します。

document.getElementById("add").addEventListener("click", function () {
  const element = document.getElementById("target");
  element.classList.add("highlight");
});

document.getElementById("remove").addEventListener("click", function () {
  const element = document.getElementById("target");
  element.classList.remove("highlight");
});

document.getElementById("id名")は、id属性がid名の要素を取得します。
.addEventListener("click", function () {処理})は、対象の要素がクリックされたときに処理を実行します。
.classList.add("クラス名")は、対象の要素にクラス名クラスを追加します。
.classList.remove("クラス名")は、対象の要素からクラス名クラスを削除します。

上記のコードを実装することで、addボタンを押すとtargetボタンの強調表示をオンに、removeボタンを押すとtargetボタンの強調表示をオフに出来ます。

addボタンを押したとき

removeボタンを押したとき