HTML-Klasseneigenschaft

Definition und Verwendung

class Die Eigenschaft legt den Klassennamen des Elements fest (classname).

class Die Eigenschaft wird hauptsächlich verwendet, um auf Klassen in einer Stilvorlage zu verweisen. Allerdings kann sie auch verwendet werden, um HTML-Elemente mit einer bestimmten Klasse über JavaScript (HTML DOM) zu ändern.

Weitere Informationen siehe:

HTML教程:HTML Eigenschaften

CSS教程:CSS Syntax

CSS Referenzhandbuch:CSS .class Selektor

HTML DOM Referenzhandbuch:HTML DOM getElementsByClassName() Methode

HTML DOM Referenzhandbuch:HTML DOM className Eigenschaft

HTML DOM Referenzhandbuch:HTML DOM classList Eigenschaft

HTML DOM Referenzhandbuch:HTML DOM Style Objekt

Beispiel

Beispiel 1

Verwenden Sie das class-Attribut im HTML-Dokument:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Bitte beachten Sie, dass dies ein wichtiger Absatz ist.:)</p>
</body>
</html>

Selbst ausprobieren

Mehr Beispiele finden Sie unten auf der Seite.

Syntax

<element class="classname">

Attributwert

Wert Beschreibung
classname

Für ein Element eine oder mehrere Klassennamen zuweisen.

Wenn mehrere Klassen angegeben werden sollen, können die Klassennamen durch Leerzeichen getrennt werden.

Dies ermöglicht es, mehreren CSS-Klassen für ein HTML-Element hinzuzufügen.

Zum Beispiel:<span class="left important">

Namenkonvention:

  • müssen mit einem Buchstaben A-Z oder a-z beginnen
  • können folgen: Buchstaben (A-Za-z), Ziffern (0-9), Bindestriche ("-") und Unterstriche ("_")

Mehr Beispiele

Beispiel 2

Fügen Sie mehrere Klassen zu einem HTML-Element hinzu:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">Titel 1</h1>
<p>Ein Absatz.</p>
</body>
</html>

Selbst ausprobieren

Beispiel 3

Fügen Sie mit JavaScript die gelbe Hintergrundfarbe zum ersten Element mit der Klasse "example" (Index 0) hinzu.

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

Selbst ausprobieren

Beispiel 4

Fügen Sie die Klasse "mystyle" mit JavaScript zum Element mit der ID "myDIV" hinzu:

document.getElementById("myDIV").classList.add("mystyle");

Selbst ausprobieren

Browserkompatibilität

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung