SYNCERのロゴ
アイキャッチ画像

class属性値を取得、変更する方法

JavaScriptで、要素のclass属性値を取得したり、変更する方法をまとめています。

サンプルコード

一連の説明には下記の要素と、element変数を用いてます。

<a class="hoge fuga piyo" id="target">リンク</a>
var element = document.getElementById( "target" ) ;

取得

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

// <a class="hoge fuga piyo" id="target">リンク</a>
var a = element.className ;	// "hoge fuga piyo"

一括編集

class属性値の全体の内容をまとめて編集するには、classNameプロパティの値を変更しましょう。

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

確認

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

// <a class="hoge fuga piyo" id="target">リンク</a>
var a = element.classList.contains( "hoge" ) ;	// true
var b = element.classList.contains( "fuga" ) ;	// true
var c = element.classList.contains( "piyo" ) ;	// true
var d = element.classList.contains( "toto" ) ;	// false

追加

あるclass属性値をその要素に追加するにはclassListのadd()を使います。既にそのclass属性値が存在する場合には無視してくれます。

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

複数のclass属性値をまとめて追加するには、第2引数、第3引数…、と指定します。

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

削除

あるclass属性値をその要素から削除するにはclassListのremove()を使います。そのclass属性値が存在しない場合には無視してくれます。

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

複数のclass属性値をまとめて削除するには、第2引数、第3引数…、と指定します。

// <a class="hoge fuga piyo" id="target">リンク</a>
element.classList.remove( "hoge", "piyo" ) ;	// <a class="fuga" id="target">リンク</a>

切り替え

あるclass属性値を、存在する場合には削除し、存在しない場合には追加するには、classListのtoggle()を使います。

// <a class="hoge fuga piyo" id="target">リンク</a>
element.classList.toggle( "toto" ) ;	// <a class="hoge fuga piyo toto" id="target">リンク</a>
element.classList.toggle( "piyo" ) ;	// <a class="hoge fuga toto" id="target">リンク</a>

デモ

"red-text"という文字が赤くなるclass属性値を追加したり削除したりしてみて下さい。

// 追加
element.classList.add( "red-text" ) ;

// 削除
element.classList.remove( "red-text" ) ;

// 切り替え
element.classList.toggle( "red-text" ) ;

ボタンをクリックしてclass属性値を編集して下さい。

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月14日 (木)
コンテンツを公開しました。