Klassenname des HTML-DOM-Elements
❮ Das Element-ObjektBeispiel
Legen Sie das Klassenattribut für ein Element fest:
element.className = "myStyle";
Holen Sie sich das Klassenattribut von "myDIV":
let value = document.getElementById("myDIV").className;
Zwischen zwei Klassennamen umschalten:
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
Weitere Beispiele unten.
Definition und Verwendung
Die className
Eigenschaft legt das Klassenattribut eines Elements fest oder gibt es zurück.
Syntax
Geben Sie die className-Eigenschaft zurück:
HTMLElementObject.className
Legen Sie die className-Eigenschaft fest:
HTMLElementObject.className = class
Eigenschaftswerte
Value | Description |
class |
The class name(s) of an element. Separate multiple classes with spaces, like "test demo". |
Rückgabewert
Type | Description |
String | The class, or a space-separated list of classes, of an element |
Mehr Beispiele
Holen Sie sich das Klassenattribut des ersten <div>-Elements (falls vorhanden):
let value = document.getElementsByTagName("div")[0].className;
Rufen Sie ein Klassenattribut mit mehreren Klassen ab:
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
Überschreiben Sie ein vorhandenes Klassenattribut mit einem neuen:
element.className = "newClassName";
Um neue Klassen hinzuzufügen, ohne vorhandene Werte zu überschreiben, fügen Sie ein Leerzeichen und die neuen Klassen hinzu:
element.className += " class1 class2";
Wenn "myDIV" eine "myStyle"-Klasse hat, ändern Sie die Schriftgröße:
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
Wenn Sie auf dieser Seite 50 Pixel vom oberen Rand scrollen, wird die Klasse „test“ hinzugefügt:
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Browser-Unterstützung
element.className
wird in allen Browsern unterstützt:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮ Das Element-Objekt