HTML -klasse Attribuut
Het HTML class-attribuut wordt gebruikt om een klasse op te geven voor een HTML-element.
Meerdere HTML-elementen kunnen dezelfde klasse delen.
Het klassekenmerk gebruiken
Het classattribuut wordt vaak gebruikt om naar een klassenaam in een stylesheet te verwijzen. Het kan ook door een JavaScript worden gebruikt om elementen met de specifieke klassenaam te openen en te manipuleren.
In het volgende voorbeeld hebben we drie <div>elementen met een classattribuut met de waarde "city". Alle drie de <div>
elementen worden gelijk gestyled volgens de .city
stijldefinitie in het hoofdgedeelte:
Voorbeeld
<!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>
In het volgende voorbeeld hebben we twee <span>elementen met een classattribuut met de waarde "note". Beide <span>
elementen worden gelijk gestileerd volgens de .note
stijldefinitie in het hoofdgedeelte:
Voorbeeld
<!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>
Tip: Het classattribuut kan op elk HTML-element worden gebruikt.
Opmerking: de klassenaam is hoofdlettergevoelig!
Tip: je kunt veel meer leren over CSS in onze CSS-zelfstudie .
De syntaxis voor klasse
Een klas maken; schrijf een punt (.) teken, gevolgd door een klassenaam. Definieer vervolgens de CSS-eigenschappen binnen accolades {}:
Voorbeeld
Maak een klasse met de naam "stad":
<!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>
Meerdere klassen
HTML-elementen kunnen tot meer dan één klasse behoren.
Om meerdere klassen te definiëren, scheidt u de klassennamen met een spatie, bijv. <div class="city main">. Het element wordt opgemaakt volgens alle opgegeven klassen.
In het volgende voorbeeld <h2>behoort het eerste element zowel tot de
cityklasse als tot de mainklasse, en krijgt het de CSS-stijlen van beide klassen:
Voorbeeld
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
Verschillende elementen kunnen dezelfde klasse delen
Verschillende HTML-elementen kunnen naar dezelfde klassenaam verwijzen.
In het volgende voorbeeld verwijst zowel <h2>en <p>
naar de klasse "stad" en zal dezelfde stijl delen:
Voorbeeld
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
Gebruik van het klassekenmerk in JavaScript
De klassenaam kan ook door JavaScript worden gebruikt om bepaalde taken voor specifieke elementen uit te voeren.
JavaScript heeft toegang tot elementen met een specifieke klassenaam met de getElementsByClassName()methode:
Voorbeeld
Klik op een knop om alle elementen met de klassenaam "stad" te verbergen:
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
Maak je geen zorgen als je de code in het bovenstaande voorbeeld niet begrijpt.
U leert meer over JavaScript in ons HTML JavaScript- hoofdstuk, of u kunt onze JavaScript-tutorial bestuderen .
Hoofdstuk samenvatting
- Het HTML
class-attribuut specificeert een of meer klassenamen voor een element - Klassen worden gebruikt door CSS en JavaScript om specifieke elementen te selecteren en te openen
- Het
classattribuut kan op elk HTML-element worden gebruikt - De klassenaam is hoofdlettergevoelig
- Verschillende HTML-elementen kunnen naar dezelfde klassenaam verwijzen
- JavaScript heeft toegang tot elementen met een specifieke klassenaam met de
getElementsByClassName()methode