浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【JavaScript】要素にclass名を追加・削除する方法

実はあまりやったことの無い操作だったので、備忘録としてまとめ。
今回は、JavaScript で要素に class 名を追加・削除する方法についてです。

参考にさせていただいた記事はこちらから。

[JavaScript] 要素にclassを追加・削除する(classList) | コピペで使える JavaScript逆引きリファレンス
https://javascript.programmer-reference.com/js-classlist/

 

使用するのは classList というプロパティです。
こちらを使用すると、その要素に設定されている class 名の一覧が取得できます。
このプロパティには、メソッドに add()remove()contains()toggle()replace() が用意されています。
今回は class 名の追加を行いたいので、add() メソッドを使います。

サンプルコードは下記のとおりです。
まず、HTML は下記のとおりです。

<div id='text-area'>
  <p>サンプルテキスト</p>
</div>

続いて、JavaScript のコードはこんな感じ。

let text_area = document.getElementById("text-area");
text_area.classList.add("area1");

1行目でtext-area という id が設定されている <div> 要素を取得し、2行目でその要素に area1 という class 名を追加しています。
追加する処理はこれだけです!
もし、class 名を削除したい場合は、add() の部分を remove() に置き換え、引数に削除したい class 名を指定してください。

また、他のメソッドで出来ることは下記のとおりです。

メソッド名 内容
contains(className) class 名が存在しているのかを判定する
toggle(className) class 名が既に存在する場合は削除、存在しない場合は追加を行う
replace(oldClassName, newClassName) 第一引数の class 名を、第二引数の class 名に置き換える

containso() メソッドはどこかで使いそうなので、是非覚えておきたいです。

 

以上、JavaScript で要素に class 名を追加・削除する方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)