【JavaScript】要素のclass属性値を取得、変更、追加する方法まとめ

2021年7月8日 2022年8月15日

こんにちは！CODE CLUB965のKです！

今回は、JavaScriptで要素のclass属性の値を取得したり、変更したりする方法について書こうと思います。

方法まとめ

まず、前提として以下のような記述があったとします。

<a class="hoge mofu" id="target">リンク</a>

このclass属性値をいじるには、getElementByIdを使って要素を取得します。

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

このelement変数を使って、class属性値を取得したり変更したりします。

取得

class属性値を取得するには、classNameプロパティを参照します。

var class_names = element.className ; // "hoge mofu"

変更

class属性値の内容を変更(編集)するには、classNameプロパティの値を変更します。

element.className = "aaa bbb" ;	// <a class="aaa bbb" id="target">リンク</a>

確認

class属性値が、その要素に付けられているか否かを確認するには、classListのcontains()を使用します。

var a = element.classList.contains( "hoge" ) ;	// true
var b = element.classList.contains( "mofu" ) ;	// true
var d = element.classList.contains( "list" ) ;	// false

class属性に「hoge」と「mofu」はありますので true となります。
逆に「list」という属性値は存在しないので false となります。

追加

あるclass属性値を要素に追加するのは、classListのadd()を使用します。
既にclass属性値が存在する場合は特に何も起きず、無視されます。

element.classList.add( "aaa", "bbb" ) ;	// <a class="hoge mofu aaa bbb" id="target">リンク</a>

上記のように書けばまとめてclass属性値を追加できます。

削除

あるclass属性値を要素から削除する場合、classListのremove()を使用します。
そのclass属性値が存在しない場合は、何も起きず無視されます。

element.classList.add( "hoge" ) ;	// <a class="mofu" id="target">リンク</a>

まとめて削除したい場合は、追加の時と同じ要領で記述すればOKです。

削除または追加（切り替え）

あるclass属性値が、存在する場合は「削除」し、存在しない場合は「追加」したいときは、classListのtoggle()を使用します。

// class属性値が、存在する場合は「削除」
element.classList.toggle( "hoge" ) ;	// <a class="mofu" id="target">リンク</a>

// class属性値が、存在しない場合は「追加」
element.classList.toggle( "zofu" ) ;	// <a class="mofu zofu" id="target">リンク</a>