HTML DOM Element className 属性
- 前のページ classList
- 次のページ click()
- 上層に戻る HTML DOM Elements オブジェクト
例
例 1
要素の class 属性を設定します：
element.className = "myStyle";
例 2
"myDIV" の class 属性を取得します：
let value = document.getElementById("myDIV").className;
例 3
二つのクラス名の間で切り替え：
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
ヒント：以下にさらに例を提供しています。
文法
className 属性を返します：
HTMLElementObject.className
className 属性の設定：
HTMLElementObject.className = class
属性値
| 値 | 説明 |
|---|---|
| class |
要素のクラス名です。 複数のクラスをスペースで区切って「test demo」といったように指定します。 |
返り値
| タイプ | 説明 |
|---|---|
| 文字列 | 要素のクラス、またはスペースで区切られたクラスリストです。 |
さらに多くの例
例4
最初の<div>要素のclass属性（もしあれば）を取得します：
let value = document.getElementsByTagName("div")[0].className;
例5
複数のクラスを持つclass属性を取得します：
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
例6
新しいclass属性で既存のclass属性をオーバーライドします：
element.className = "newClassName";
例7
既存の値をオーバーライドせずに新しいクラスを追加するには、スペースと新しいクラスを追加してください：
element.className += " class1 class2";
例8
「myDIV」が「myStyle」クラスを持っている場合、フォントサイズを変更します：
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
例9
ページのトップから50ピクセルスクロールすると「test」クラスが追加されます：
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
ブラウザのサポート
すべてのブラウザがサポートしています element.className：
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| サポート | サポート | サポート | サポート | サポート | サポート |
- 前のページ classList
- 次のページ click()
- 上層に戻る HTML DOM Elements オブジェクト
