HTMLDOM要素className
❮要素オブジェクト例
要素のクラス属性を設定します。
element.className = "myStyle";
「myDIV」のクラス属性を取得します。
let value = document.getElementById("myDIV").className;
2つのクラス名を切り替えます。
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
以下のその他の例。
定義と使用法
プロパティは、要素のclassNameクラス属性を設定または返します。
構文
classNameプロパティを返します。
HTMLElementObject.className
classNameプロパティを設定します。
HTMLElementObject.className = class
プロパティ値
| Value | Description |
| class |
The class name(s) of an element. Separate multiple classes with spaces, like "test demo". |
戻り値
| Type | Description |
| String | The class, or a space-separated list of classes, of an element |
その他の例
最初の<div>要素（存在する場合）のクラス属性を取得します。
let value = document.getElementsByTagName("div")[0].className;
複数のクラスを持つクラス属性を取得します。
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
既存のクラス属性を新しいもので上書きします。
element.className = "newClassName";
既存の値を上書きせずに新しいクラスを追加するには、スペースと新しいクラスを追加します。
element.className += " class1 class2";
「myDIV」に「myStyle」クラスがある場合は、フォントサイズを変更します。
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
このページの上部から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 |
| Yes | Yes | Yes | Yes | Yes | Yes |
❮要素オブジェクト