JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.classListを使ったclassの削除や追加

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.classList

JavaScriptの.classListを使ったclassの削除や追加

JavaScriptの.classListを使ったclassの削除や追加

.classList で、要素のclassを削除したり、追加したりすることが可能です。

.classList

.classListで、classを操作します。

内容メソッド
classの削除.classList.remove(“hoge”);
classの追加.classList.add(“hoge”);
classの追加と削除の交互の切り替え.classList.toggle(“hoge”);
classの置換 ※例はhogeをfugafugaに置換.classList.replace(“hoge”, “fugafuga”);

複数classを指定する場合。例えばaddで追加する場合、.classList.add("hoge", "fuga", "hogehoge"); のようにカンマ区切りで複数してすることができます。

.classList.toggle()を使ったサンプル

以下は.classList.toggle() で要素の削除を行うサンプルです。toggleなので、ボタンをクリックすることで、classの削除・追加が交互に行われます。

ボタンでclassが削除される要素

赤のテキストでは、指定したclassがついている状態。黒のテキストの場合はclassが削除されている状態です。

.classList.toggle()を使ったコード

それでは、上記サンプルのHTMLを見てみましょう。

<p id="deleteconpo" class="deleteclass">ボタンでclassが削除される要素</p>
<button id="deleteBtn1">idが#deleteBtn1のボタン</button>

このように、HTMLでは p タグと button タグのシンプルな構成です。

そして、以下が対象のJavaScriptです。

document.querySelector('#deleteBtn1').addEventListener('click', () => {   
  document.getElementById("deleteconpo").classList.toggle("deleteclass")   
});

順に使われている語句を説明していくと、まずquerySelectordeleteBtn1 を、addEventListener でクリック条件を設定します。

そして、ボタンをクリックするとgetElementByIddeleteconpo のidがついている要素を対象にして、deleteclassclassがついている場合は削除classがついていない場合は追加します。