HTML DOM Element className egenskap

Definition och användning

className Ställ in eller returnera elementets class-egenskap.

Se också:

Element classList egenskap

Dokument getElementsByClassName() metod

HTML DOM Style objekt

Exempel

Exempel 1

Ställ in class-egenskapen för elementet:

element.className = "myStyle";

Prova själv

Exempel 2

Hämta class-egenskapen för "myDIV":

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

Prova själv

Exempel 3

Växla mellan två klassnamn:

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

Prova själv

Tips:Mer exempel på nedan på sidan.

Syntax

Returnera className-egenskapen:

HTMLElementObject.className

Ställ in className-egenskapen:

HTMLElementObject.className = class

Egenskapsvärde

Värde Beskrivning
class

Elements klassnamn.

Del med mellanslag flera klasser, t.ex. "test demo".

Returvärde

Typ Beskrivning
Sträng Elements klass, eller en klasslista avdelad med mellanslag.

Mer exempel

Exempel 4

Hämta class-attributet för den första <div>-elementen (om det finns):

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

Prova själv

Exempel 5

Hämta class-attributet för element med flera klasser:

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

Prova själv

Exempel 6

Ersätt befintliga class-attribut med nya class-attribut:

element.className = "newClassName";

Prova själv

Exempel 7

För att lägga till en ny klass utan att överskriva befintliga värden, lägg till utrymme och den nya klassen:

element.className += " class1 class2";

Prova själv

Exempel 8

Om "myDIV" har "myStyle"-klassen, ändras teckenstorleken:

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

Prova själv

Exempel 9

Om du rullar 50 pixlar från sidans topp, läggs "test"-klassen till:

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

Prova själv

Webbläsarstöd

Alla webbläsare stöder element.className：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd Stöd

Relaterade sidor

CSS-guide:CSS syntax

CSS referenshandbok:CSS .class väljare