読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

JavaScriptのclassName属性は,要素の複数のクラス名をスペース区切りで取得する

javascript css html サンプルコード

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