LoginSignup

Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

LoginSign up
1
0
@DreamMyHomeinピープルソフトウェア株式会社

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

Posted at

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

image.png

実装

今回は、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ボタンを押したとき
image.png

removeボタンを押したとき
image.png

1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
DreamMyHome
peoplesoftware
主にJavaやC#を使った受託開発や、BaaSなどのクラウドサービス、スマホアプリの自社開発を行っている会社です。※各記事の内容は個人の見解であり、所属する会社の公式見解ではありません。
http://www.pscsrv.co.jp/

Today's trending articles

See all

Comments

oswe99489
@oswe99489
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");
});

getElementById()は少ないながら検索コストがかかるのと、document.getElementById("target")に該当する要素は変化することが無いので、addEventListener()の外側であらかじめ取得しておくと無駄が省けます。

const element = document.getElementById("target");

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

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

また、const element = document.getElementById("target");を外に出したことで各ボタンクリック時のイベントハンドラーの中身が1ステートメントになったので、アロー関数式での短縮形で更に簡略化できます。

const element = document.getElementById("target");

document.getElementById("add").addEventListener("click", () => element.classList.add("highlight"));

document.getElementById("remove").addEventListener("click", () => element.classList.remove("highlight"));
0

Let's comment your feelings that are more than good

LoginSign Up

Being held Article posting campaign

はじめての記事投稿

~
View details

CodeAGIで実際にコードを自動生成してレビューを投稿しよう！

~
View details
All
1
0

Login to continue?

Login or Sign up with social account

Login or Sign up with your email address

Login with your email addressSign up with your email address