Beispiel
Stellen Sie die Klasse für ein <div> Element mit id = "myDiv":
document.getElementById("myDIV").className = "mystyle";
Versuch es selber " Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.
Definition und Verwendung
Die Eigenschaft classname Sätze oder gibt den Klassennamen eines Elements (der Wert eines Klassenattribut des Elements).
Tipp: Eine ähnliche Eigenschaft classname ist die classlist Eigenschaft.
Browser-Unterstützung
Eigentum | |||||
---|---|---|---|---|---|
className | Ja | Ja | Ja | Ja | Ja |
Syntax
Bringen Sie die Eigenschaft classname:
HTMLElementObject .className
Stellen Sie die Eigenschaft classname:
HTMLElementObject .className= class
Eigenschaftswerte
Wert | Beschreibung |
---|---|
class | Gibt den Klassennamen eines Elements. Um mehrere Klassen gelten, trennen Sie diese mit Leerzeichen, wie "test demo" - "test demo" |
Technische Details
Rückgabewert: | Ein String, die die Klasse oder eine durch Leerzeichen getrennte Liste von Klassen, eines Elements |
---|
Mehr Beispiele
Beispiel
Holen Sie sich die Klassennamen des ersten <div> Elements im Dokument (if any) :
var x = document.getElementsByTagName("DIV")[0].className;
Das Ergebnis von x wird sein:
mystyle
Versuch es selber " Beispiel
Andere Beispiele, wie die Klassennamen eines Elements zu erhalten:
var x = document.getElementsByClassName("mystyle")[0].className;
var y =
document.getElementById("myDIV").className;
Versuch es selber " Beispiel
Holen Sie sich die Klassennamen eines Elements mit mehreren Klassen:
<div id="myDIV" class="mystyle test example">I am a DIV element</div>
var x = document.getElementById("myDIV").className;
Das Ergebnis von x wird sein:
mystyle text example
Versuch es selber " Beispiel
Überschreiben einer bestehenden Klassennamen mit einem neuen:
<div id="myDIV" class="mystyle">I am a DIV element</div>
document.getElementById("myDIV").className = "newClassName";
Versuch es selber " Beispiel
Um eine Klasse zu einem Element hinzuzufügen, ohne vorhandene Werte überschrieben, ein Leerzeichen einzufügen und den neuen Klassennamen:
document.getElementById("myDIV").className += " anotherClass";
Versuch es selber " Beispiel
Wenn es eine Klasse von ist "mystyle" mit id = "myDiv" in einem Element, ändern ihre font-size:
var x = document.getElementById("myDIV");
if (x.className ===
"mystyle") {
x.style.fontSize = "30px";
}
Versuch es selber " Beispiel
Umschalten zwischen den Klassennamen auf verschiedenen Bildlaufpositionen - Wenn sich der Benutzer nach unten scrollt 50 Pixel von der Oberseite, der Klassenname "test" wird an ein Element hinzugefügt werden (and removed when scrolled up again) werden, (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
= "";
}
}
Versuch es selber " Verwandte Seiten
CSS Tutorial: CSS - Selektoren
CSS Referenz: CSS .class- Selector
HTML DOM Referenz: HTML DOM classList Property
HTML DOM Referenz: HTML DOM getElementsByClassName() Methode
HTML DOM Referenz: HTML DOM Style - Objekt
<Element Object