例
クラスを設定して<div>のid =「myDIV」を持つ要素：
document.getElementById("myDIV").className = "mystyle"; »それを自分で試してみてください もっと"Try it Yourself"以下の例。
定義と使用法
classNameプロパティセットまたは要素（要素のclass属性の値）のクラス名を返します。
ヒント：クラス名と同様の性質があるCLASSLISTプロパティ。
ブラウザのサポート
| プロパティ | |||||
|---|---|---|---|---|---|
| className | はい | はい | はい | はい | はい |
構文
classNameプロパティを返します：
HTMLElementObject .classNameclassNameプロパティを設定します。
HTMLElementObject .className= class プロパティ値
| 値 | 説明 |
|---|---|
| class | 要素のクラス名を指定します。 以下のように、スペースで区切り、複数のクラスを適用するには"test demo" |
技術的な詳細
| 戻り値： | 要素のクラスを表す文字列、またはクラスのスペース区切りのリスト、 |
|---|
その他の例
例
最初のクラス名取得<div>ドキュメント内の要素を(if any) ：
var x = document.getElementsByTagName("DIV")[0].className; xの結果は次のようになります。
mystyle »それを自分で試してみてください 例
要素のクラス名を取得する方法についてその他の例：
var x = document.getElementsByClassName("mystyle")[0].className;
var y =
document.getElementById("myDIV").className; »それを自分で試してみてください 例
複数のクラスを持つ要素のクラス名を取得します。
<div id="myDIV" class="mystyle test example">I am a DIV element</div>
var x = document.getElementById("myDIV").className;xの結果は次のようになります。
mystyle text example »それを自分で試してみてください 例
新しいものと既存のクラス名の上書き：
<div id="myDIV" class="mystyle">I am a DIV element</div>
document.getElementById("myDIV").className = "newClassName"; »それを自分で試してみてください 例
既存の値を上書きすることなく、要素にクラスを追加するには、スペース、新しいクラス名を挿入します。
document.getElementById("myDIV").className += " anotherClass"; »それを自分で試してみてください 例
クラスがある場合"mystyle" ID =「myDIV」を持つ要素には、そのフォントサイズを変更します。
var x = document.getElementById("myDIV");
if (x.className ===
"mystyle") {
x.style.fontSize = "30px";
} »それを自分で試してみてください 例
異なるスクロール位置にクラス名を切り替える-場合ダウン50個のピクセル上からユーザーがスクロール、クラス名"test"エレメントに追加され(and removed when scrolled up again) 。
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
}
else {
document.getElementById("myP").className
= "";
}
}
»それを自分で試してみてください 関連ページ
CSSチュートリアル： CSSセレクタ
CSSリファレンス： CSS の.classセレクター
HTML DOMリファレンス： HTML DOM classList Property
HTML DOMリファレンス： HTML DOM getElementsByClassName()メソッド
HTML DOMリファレンス： HTML DOMスタイルオブジェクト
<Elementオブジェクト