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属性値を編集して下さい。
関連記事
- ラジオボタンの値を取得する方法
- どのラジオボタンが選択状態かを取得するには、要素のcheckedプロパティを確認します。
- スクロールをする方法
- 絶対的、相対的に位置を指定して、スクロールします。
- 別ページに移動させる方法
- リンクをクリックしなくても、ユーザーを指定したページに移動させます。
- 配列に要素を追加する方法
- 配列の先頭、末尾、または指定位置に要素を追加します。