HTML class-attribuut
- Previous page accesskey
- Next page contenteditable
- Go back one level HTML Global Attributes
Definitie en gebruik
class
Het attribuut definieert de klassenaam van het element (classname).
class
Het attribuut wordt voornamelijk gebruikt om naar klassen in een stijlsheet te verwijzen. Het kan echter ook worden gebruikt om HTML-elementen met een specifieke klasse te wijzigen via JavaScript (HTML DOM).
Zie ook:
HTML handleiding:HTML attributes
CSS handleiding:CSS syntax
CSS referentiehandleiding:CSS .class selector
HTML DOM referentiehandleiding:HTML DOM getElementsByClassName() methode
HTML DOM referentiehandleiding:HTML DOM className eigenschap
HTML DOM referentiehandleiding:HTML DOM classList eigenschap
HTML DOM referentiehandleiding:HTML DOM Style object
Voorbeeld
Voorbeeld 1
Gebruik de class-eigenschap in een HTML-document:
<html> <head> <style> h1.intro { color: blue; } p.important { color: green; } </style> </head> <body> <h1 class="intro">Hoofdstuk 1</h1> <p>Een paragraaf.</p> <p class="important">Let op, dit is een belangrijke paragraaf. :)</p> </body> </html>
Meer voorbeelden zijn beschikbaar onderaan de pagina.
Syntax
<element class="classname">
Eigenschapswaarde
Waarde | Beschrijving |
---|---|
classname |
Specificeer een of meerdere klassen voor een element. Als je meerdere klassen wilt specificeren, kun je de klassenamen scheiden met een spatie. Dit staat toe om meerdere CSS-klassen te combineren voor een HTML-element. Bijvoorbeeld: <span class="left important"> Naamgeving:
|
Meer voorbeelden
Voorbeeld 2
Voeg meerdere klassen toe aan een HTML-element:
<!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>Een paragraaf.</p> </body> </html>
Voorbeeld 3
Gebruik JavaScript om een gele achtergrondkleur toe te voegen aan het eerste element met class="example" (index 0).
let x = document.getElementsByClassName("example"); x[0].style.backgroundColor = "yellow";
Example 4
Use JavaScript to add the "mystyle" class to the element with id "myDIV":
document.getElementById("myDIV").classList.add("mystyle");
Browser support
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Support | Support | Support | Support | Support |
- Previous page accesskey
- Next page contenteditable
- Go back one level HTML Global Attributes