HTML class egenskap

Definition och användning

class Egenskapen specificerar elementets klassnamn (classname).

class Egenskapen används huvudsakligen för att peka på klasser i stilmallen. Men det kan också användas för att ändra HTML-element med en specificerad klass via JavaScript (HTML DOM).

Se också:

HTML tutorial:HTML egenskaper

CSS tutorial:CSS syntax

CSS referenshandbok:CSS .class väljare

HTML DOM referenshandbok:HTML DOM getElementsByClassName() metod

HTML DOM referenshandbok:HTML DOM className-attribut

HTML DOM referenshandbok:HTML DOM classList-attribut

HTML DOM referenshandbok:HTML DOM Style objekt

Exempel

Exempel 1

Använd class-attributet i ett HTML-dokument:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Observera, detta är en viktig avsnitt.:)</p>
</body>
</html>

Prova själv

Mer exempel finns på sidan nedan.

Syntaks

<element class="classname">

Egenskapsvärde

Värde Beskrivning
classname

Specificera en eller flera klassnamn för ett element.

Om du vill specificera flera klasser, kan du använda blanksteg mellan klassnamnen.

Detta tillåter dig att kombinera flera CSS-klasser för ett HTML-element.

Till exempel: <span class="left important">

Namngivningsregler:

  • Måste börja med en bokstav A-Z eller a-z.
  • kan följas av: bokstäver (A-Za-z), siffror (0-9), bindestreck ("-") och understreck ("_").

Mer exempel

Exempel 2

Lägg till flera klasser till ett 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">Rubrik 1</h1>
<p>En avsnitt.</p>
</body>
</html>

Prova själv

Exempel 3

Använd JavaScript för att lägga till en gul bakgrundsfärg till den första elementet med klassen "example" (index 0).

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

Prova själv

Exempel 4

Använd JavaScript för att lägga till "mystyle"-klassen till elementet med id "myDIV":

document.getElementById("myDIV").classList.add("mystyle");

Prova själv

Webbläsarstöd

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