JavaScriptのclassName属性は,要素の複数のクラス名をスペース区切りで取得する
HTML上で,あるDOM要素が複数のクラス名を持っている場合,
classNameプロパティの呼び出しは,複数のクラス名を文字列として取得する。
HTML上のclass文字列がそのまま文字列として返る
文字列の様子は,htmlに書かれているまま。
複数のクラス名の間に半角スペースが1つ書かれていれば,その通りの文字列になるし,
HTML上でスペースが2つあれば,classNameで取得される文字列もそのようになる。
getAttribute("class")というメソッド呼び出しも同じ挙動。
サンプルコード:
<html> <body> <div class="hoge1 fuga1"> テスト用の要素1 </div> <div class=" hoge2 fuga3 "> テスト用の要素2 </div> <input type="button" onclick="f()" value="テスト"> <script> function f(){ var elem = document.getElementsByTagName("div")[0]; // "hoge fuga" と表示される alert( elem.className ); alert( elem.getAttribute("class") ); var elem2 = document.getElementsByTagName("div")[1]; // " hoge2 fuga3 " と表示される alert( elem2.className ); alert( elem2.getAttribute("class") ); } </script> </body> </html>
参考資料
JavaScript for CSS (4)
http://east.portland.ne.jp/~sigekazu/...
- CLASS名はスペースで区切って複数指定することもできる
css - Get Class Name in javascript - Stack Overflow
http://stackoverflow.com/questions/74...
- .classNameでクラス名の値を取得
classNameから1つのクラスを抽出する正規表現 [JavaScript] : ずっと工事中
http://blog.livedoor.jp/eeu/archives/...
JavaScript から HTML Element の class 属性を取得する方法 - vivid memo
http://d.hatena.ne.jp/vividcode/20100...
web帳 | JavaScript class取得 getElementByClassNameとquerySelector
http://www.webcyou.com/?p=4075