Attribut der HTML -Klasse
Das HTML class-Attribut wird verwendet, um eine Klasse für ein HTML-Element anzugeben.
Mehrere HTML-Elemente können dieselbe Klasse teilen.
Verwenden des Klassenattributs
Das classAttribut wird häufig verwendet, um auf einen Klassennamen in einem Stylesheet zu verweisen. Es kann auch von einem JavaScript verwendet werden, um auf Elemente mit dem spezifischen Klassennamen zuzugreifen und diese zu manipulieren.
Im folgenden Beispiel haben wir drei <div>Elemente mit einem classAttribut mit dem Wert „Stadt“. Alle drei <div>
Elemente werden entsprechend der .city
Stildefinition im Head-Bereich gleichermaßen gestylt:
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>
Im folgenden Beispiel haben wir zwei <span>Elemente mit einem classAttribut mit dem Wert „note“. Beide <span>
Elemente werden entsprechend der .note
Stildefinition im Head-Bereich gleichermaßen gestylt:
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>
Tipp: Das classAttribut kann für jedes HTML-Element verwendet werden.
Hinweis: Beim Klassennamen wird zwischen Groß- und Kleinschreibung unterschieden!
Tipp: In unserem CSS-Tutorial erfahren Sie noch viel mehr über CSS .
Die Syntax für 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 "Stadt":
<!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>
Mehrere Klassen
HTML-Elemente können zu mehr als einer Klasse gehören.
Um mehrere Klassen zu definieren, trennen Sie die Klassennamen mit einem Leerzeichen, zB <div class="city main">. Das Element wird gemäß allen angegebenen Klassen gestylt.
Im folgenden Beispiel gehört das erste <h2>Element sowohl zur
cityKlasse als auch zur mainKlasse und erhält die CSS-Stile von beiden Klassen:
Beispiel
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
Verschiedene Elemente können dieselbe Klasse teilen
Verschiedene HTML-Elemente können auf denselben Klassennamen verweisen.
Im folgenden Beispiel zeigen sowohl <h2>als auch <p>
auf die Klasse „city“ und haben denselben Stil:
Beispiel
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
Verwendung des Klassenattributs in JavaScript
Der Klassenname kann auch von JavaScript verwendet werden, um bestimmte Aufgaben für bestimmte Elemente auszuführen.
getElementsByClassName()JavaScript kann mit der Methode auf Elemente mit einem bestimmten Klassennamen zugreifen :
Beispiel
Klicken Sie auf eine Schaltfläche, um alle Elemente mit dem Klassennamen "Stadt" auszublenden:
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
Machen Sie sich keine Sorgen, wenn Sie den Code im obigen Beispiel nicht verstehen.
Mehr über JavaScript erfahren Sie in unserem HTML-JavaScript- Kapitel, oder Sie können unser JavaScript-Tutorial studieren .
Kapitelzusammenfassung
- Das HTML
class-Attribut gibt 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
classAttribut kann für jedes HTML-Element verwendet werden - Beim Klassennamen wird zwischen Groß- und Kleinschreibung unterschieden
- Verschiedene HTML-Elemente können auf denselben Klassennamen verweisen
getElementsByClassName()JavaScript kann mit der Methode auf Elemente mit einem bestimmten Klassennamen zugreifen