HTML Klassenattribut
Das HTML-Attribut class wird verwendet, um eine Klasse für ein HTML-Element anzugeben.
Mehrere HTML-Elemente können dieselbe Klasse teilen.
Verwenden des Klassenattributs
Das Attribut class wird häufig verwendet, um auf einen Klassennamen in einem Stylesheet zu verweisen. Es kann auch von JavaScript verwendet werden, um auf Elemente mit dem spezifischen Klassennamen zuzugreifen und diese zu bearbeiten.
Im folgenden Beispiel haben wir drei <div>-Elemente mit einem class-Attribut mit dem Wert "city". Alle drei <div>-Elemente werden entsprechend der Stildefinition .city im Kopf gleich gestaltet Abschnitt:
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Try it Yourself »
Im folgenden Beispiel haben wir zwei <span>-Elemente mit einem class-Attribut mit dem Wert "note". Beide <span>-Elemente werden entsprechend der Stildefinition .note im Kopfabschnitt gleich gestaltet:
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Try it Yourself »
Tipp: Das Attribut class kann für jedes HTML-Element verwendet werden.
Notiz: Beim Klassennamen muss die Groß-/Kleinschreibung beachtet werden!
Tipp: In unserem CSS-Tutorial erfahren Sie viel mehr über CSS.
Die Syntax für die Klasse
Um eine Klasse zu erstellen; Schreiben Sie einen Punkt (.), gefolgt von einem Klassennamen. Definieren Sie dann die CSS-Eigenschaften in geschweiften Klammern {}:
Beispiel
Erstellen Sie eine Klasse mit dem Namen "city":
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
Try it Yourself »
Mehrere Klassen
HTML-Elemente können zu mehr als einer Klasse gehören.
Um mehrere Klassen zu definieren, trennen Sie die Klassennamen durch ein Leerzeichen, z. B. <div class="city main">. Das Element wird entsprechend allen angegebenen Klassen gestaltet.
Im folgenden Beispiel gehört das erste <h2>-Element sowohl zur Klasse city als auch zur Klasse main class und ruft die CSS-Stile von beiden Klassen ab:
Beispiel
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
Try it Yourself »
Verschiedene Elemente können dieselbe Klasse haben
Verschiedene HTML-Elemente können auf denselben Klassennamen verweisen.
Im folgenden Beispiel zeigen sowohl <h2> als auch <p> auf die Klasse "city" und tun dies auch teilen den gleichen Stil:
Beispiel
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
Try it Yourself »
Verwendung des Klassenattributs in JavaScript
Der Klassenname kann auch von JavaScript verwendet werden, um bestimmte Aufgaben für bestimmte Elemente auszuführen.
JavaScript kann mit der Methode getElementsByClassName() auf Elemente mit einem bestimmten Klassennamen zugreifen:
Beispiel
Klicken Sie auf eine Schaltfläche, um alle Elemente mit dem Klassennamen auszublenden "city":
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
Try it Yourself »
Machen Sie sich keine Sorgen, wenn Sie den Code im obigen Beispiel nicht verstehen.
Mehr über JavaScript erfahren Sie in unserem Kapitel HTML-JavaScript oder Sie können unser JavaScript-Tutorial studieren.
Kapitelzusammenfassung
- Das HTML-Attribut
classgibt einen oder mehrere Klassennamen für ein Element an - Klassen werden von CSS und JavaScript verwendet, um bestimmte Elemente auszuwählen und darauf zuzugreifen
- Das Attribut
classkann für jedes HTML-Element verwendet werden - Beim Klassennamen wird die Groß-/Kleinschreibung beachtet
- Verschiedene HTML-Elemente können auf denselben Klassennamen verweisen
- JavaScript kann mit der Methode
getElementsByClassName()auf Elemente mit einem bestimmten Klassennamen zugreifen
