HTML DOM Element className
❮Het Element-ObjectVoorbeeld
Stel het class-attribuut voor een element in:
element.className = "myStyle";
Verkrijg het class attribuut van "myDIV":
let value = document.getElementById("myDIV").className;
Wissel tussen twee klassennamen:
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
Hieronder meer voorbeelden.
Definitie en gebruik
De className
eigenschap stelt het class-attribuut van een element in of retourneert.
Syntaxis
Retourneer de eigenschap className:
HTMLElementObject.className
Stel de eigenschap className in:
HTMLElementObject.className = class
Eigendomswaarden
Value | Description |
class |
The class name(s) of an element. Separate multiple classes with spaces, like "test demo". |
Winstwaarde
Type | Description |
String | The class, or a space-separated list of classes, of an element |
Meer voorbeelden
Haal het class attribuut op van het eerste <div> element (indien aanwezig):
let value = document.getElementsByTagName("div")[0].className;
Een klassekenmerk ophalen met meerdere klassen:
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
Overschrijf een bestaand klassekenmerk met een nieuwe:
element.className = "newClassName";
Om nieuwe klassen toe te voegen, zonder bestaande waarden te overschrijven, voeg je een spatie en de nieuwe klassen toe:
element.className += " class1 class2";
als "myDIV" een "myStyle"-klasse heeft, verander dan de lettergrootte:
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
Als u 50 pixels vanaf de bovenkant van deze pagina scrolt, wordt de klasse "test" toegevoegd:
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Browserondersteuning
element.className
wordt ondersteund in alle browsers:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮Het Element-Object