Attribut der HTML -Klasse
Beispiel
Verwendung des class-Attributs in einem 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">Note that this is an important paragraph. :)</p>
</body>
</html>
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Das classAttribut gibt einen oder mehrere Klassennamen für ein Element an.
Das classAttribut wird meistens verwendet, um auf eine Klasse in einem Stylesheet zu zeigen. Es kann jedoch auch von einem JavaScript (über das HTML-DOM) verwendet werden, um Änderungen an HTML-Elementen mit einer bestimmten Klasse vorzunehmen.
Browser-Unterstützung
| Attribute | |||||
|---|---|---|---|---|---|
| class | Yes | Yes | Yes | Yes | Yes |
Syntax
<element class="classname">
Attributwerte
| Value | Description |
|---|---|
| classname | Specifies one or more class names for an element. To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.
Naming rules:
|
Mehr Beispiele
Beispiel
Fügen Sie einem HTML-Element mehrere Klassen hinzu:
<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
color: blue;
text-align: center;
}
.important {
background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">Header 1</h1>
<p>A paragraph.</p>
</body>
</html>
Beispiel
Verwenden von JavaScript, um dem ersten Element mit class="example" (Index 0) eine gelbe Hintergrundfarbe hinzuzufügen.
var x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";
Beispiel
Verwenden von JavaScript zum Hinzufügen der Klasse "mystyle" zu einem Element mit id="myDIV":
document.getElementById("myDIV").classList.add("mystyle");
Verwandte Seiten
HTML-Tutorial: HTML-Attribute
CSS-Tutorial: CSS-Syntax
CSS-Referenz: CSS .class Selector
HTML-DOM-Referenz: HTML-DOM-Methode getElementsByClassName()
HTML-DOM-Referenz: HTML-DOM-Klassenname-Eigenschaft
HTML-DOM-Referenz: HTML-DOM-classList-Eigenschaft
HTML-DOM-Referenz: HTML-DOM-Stilobjekt