HTML DOM Element className egenskab

Definition og brug

className Indstil eller returner elementets class-egenskab.

Se også:

Element classList egenskaben

Document getElementsByClassName() metoden

HTML DOM Style Object

Eksempel

Eksempel 1

Indstil class-egenskaben for elementet:

element.className = "myStyle";

Prøv det selv

Eksempel 2

Hent class-egenskaben for "myDIV":

let value = document.getElementById("myDIV").className;

Prøv det selv

Eksempel 3

Skift mellem to klassenavne:

if (element.className == "myStyle") {
  element.className = "newStyle";
} else {
  element.className = "myStyle";
}

Prøv det selv

Vedvarende:Flere eksempler findes nedenfor på siden.

Syntaks

Returner className-egenskaben:

HTMLElementObject.className

Indstil className-egenskaben:

HTMLElementObject.className = class

Egenskabsværdi

Værdi Beskrivelse
class

Elements klassenavn.

Adskil flere klasser med mellemrum, f.eks. "test demo".

Returværdi

Type Beskrivelse
Streng Elements klasse, eller en liste over klasser adskilt med mellemrum.

Flere eksempler

Eksempel 4

Få class-attribut for den første <div>-element (hvis der er en):

let value = document.getElementsByTagName("div")[0].className;

Prøv det selv

Eksempel 5

Få class-attribut med flere klasser:

<div id="myDIV" class="myStyle test example">
<p>Jeg er myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;

Prøv det selv

Eksempel 6

Overskriv eksisterende class-attribut med en ny class-attribut:

element.className = "newClassName";

Prøv det selv

Eksempel 7

For at tilføje en ny klasse uden at overskrive eksisterende værdier, tilføj et mellemrum og den nye klasse:

element.className += " class1 class2";

Prøv det selv

Eksempel 8

Hvis "myDIV" har "myStyle" klassen, ændres skriftstørrelsen:

const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
  elem.style.fontSize = "30px";
}

Prøv det selv

Eksempel 9

Hvis du ruller 50 pixels fra toppen af siden, vil "test" klassen blive tilføjet:

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}

Prøv det selv

Browserversioner understøtter

Alle browsere understøtter element.className：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support

Relaterede sider

CSS tutorial:CSS syntaks

CSS reference manual:CSS .class vælger