element.classNameプロパティ

投稿日: 2013年8月16日 作成者: alphasis

element.classNameは、「element」に指定した要素のclass属性の値を取得、もしくは、設定するプロパティ。

構文

取得

var $className = $elementNodeReference.className;

戻り値

指定した要素のclass属性の値。

設定

$elementNodeReference.className = class属性値;

サンプル

id属性がsampleである要素のclass属性の値：

class属性の値を変更後：

サンプルの動作について

  1. 「getClassName()」ボタンをクリックすると、「id属性がsampleである要素のclass属性の値：」の右横に「sampleClassName1」と表示する。
  2. 「setClassName()」ボタンをクリックすると、「class属性の値を変更後：」の右横に「sampleClassName2」と表示する。
  3. 再度、「getClassName()」ボタンをクリックすると、「id属性がsampleである要素のclass属性の値：」の右横に「sampleClassName2」と表示する。
  4. 「setClassName()」ボタンをクリックする度に、id属性がsampleである要素のclass属性の値を、「sampleClassName2、sampleClassName3、sampleClassName4、sampleClassName5」のように数字部分をカウントアップする。
  5. 「getClassName()」ボタンをクリックすると、id属性がsampleである要素のclass属性の現在の値を、「id属性がsampleである要素のclass属性の値：」の右横に表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
var $count = 1;
function getClassName() {
 var $elementNodeReference = document.getElementById( "sample" );
 var $className = $elementNodeReference.className;
 document.getElementById( "sampleOutput1" ).innerHTML = $className;
}
function setClassName() {
 var $elementNodeReference = document.getElementById( "sample" );
 $elementNodeReference.className = "sampleClassName" + ++$count;
 var $className = $elementNodeReference.className;
 document.getElementById( "sampleOutput2" ).innerHTML = $className;
}
</script>

HTML

<div id="sample" class="sampleClassName1"></div>
<button onclick="getClassName();">getClassName()</button>
<p>id属性がsampleである要素のclass属性の値：<span id="sampleOutput1"></span></p>
<button onclick="setClassName();">setClassName()</button>
<p>class属性の値を変更後：<span id="sampleOutput2"></span></p>

スポンサード リンク

カテゴリー: DOM, Elementオブジェクト, JavaScript, プロパティ, リファレンス パーマリンク