JavaScript オブジェクト

JavaScript リファレンスマニュアル

JS DOM リファレンスマニュアル

JavaScript History オブジェクト HTML DOM Element オブジェクト

HTML DOM className 属性

HTML DOM Element オブジェクト

className属性は指定された要素のclass属性値を設定または返します。

指定された要素にクラス属性がない場合やクラス属性が設定されていない場合、nullが返されます：null文字列。

文法：

className属性の返り値：

element.className

className属性の設定：

element.className = cName

例

document.getElementById("x").className = "para";

テストしてみる‹/›

ブラウザの互換性

すべてのブラウザでclassName属性が完全にサポートされています：

属性
className	は	は	は	は	は

属性値

値	説明
cName	現在の要素のクラスまたはスペース区切りのクラスを示す文字列変数

技術的詳細

返り値：	要素のクラスまたはクラスのスペース区切りのリストを示す文字列
DOMバージョン：	DOMレベル1

さらに詳しい例

最初の<div>要素のクラス名を返します：

例

var x = document.getElementsByTagName("div")[0].className;

テストしてみる‹/›

既存のクラス名を新しい名前で上書きします：

例

<div class="myDiv">これはDIV要素です</div>
script>
var x = document.getElementsByTagName("div")[0];
x.className = "anotherClass";
</script>

テストしてみる‹/›

既存の値を上書きせずにクラスを要素に追加するには、スペースと新しいクラス名を挿入してください：

例

<div class="myDiv">これはDIV要素です</div>
script>
var x = document.getElementsByTagName("div")[0];
x.className　+= " anotherClass";
</script>

テストしてみる‹/›

以下は<div>要素が「shadow」クラスを持っているかどうかを確認する方法です：

例

var x = document.getElementsByTagName("div")[0];
if (x.className.indexOf("shadow") !=　-1) {
　　　alert("Yes... The DIV has 'shadow' class");
} else {
　　　alert("False");
}

テストしてみる‹/›

JavaScript オブジェクト

JavaScript リファレンスマニュアル

JS DOM リファレンスマニュアル

HTML DOM className 属性

文法：

ブラウザの互換性

属性値

技術的詳細

さらに詳しい例

関連参考