Neueste Web-Entwicklung Tutorials
 

HTML DOM className Propery

<Element Object

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
Beispiele

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