HTML class egenskab

Definition og brug

class Egenskaben definerer elementets klasse navn (classname).

class Egenskaben bruges hovedsageligt til at pege på klasser (class) i stilark. Men det kan også bruges til at ændre HTML-elementer med en specificeret klasse ved hjælp af JavaScript (HTML DOM).

Se også:

HTML tutorial:HTML egenskaber

CSS tutorial:CSS syntaks

CSS reference manual:CSS .class vælger

HTML DOM reference manual:HTML DOM getElementsByClassName() method

HTML DOM reference manual:HTML DOM className property

HTML DOM reference manual:HTML DOM classList property

HTML DOM reference manual:HTML DOM Style objekt

Eksempel

Eksempel 1

Brug class-attributten i HTML-dokumentet:

<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">Bemærk, dette er en vigtig afsnit.:)</p>
</body>
</html>

Prøv det selv

Flere eksempler findes nedenfor på siden.

Syntaks

<element class="classname">

Attributværdi

Værdi Beskrivelse
classname

Tilføj en eller flere klassenavne til et element.

Hvis du vil specificere flere klasser, kan du adskille klassenavne med mellemrum.

Dette muliggør, at du kan kombinere flere CSS-klasser til et HTML-element.

For eksempel: <span class="left important">

Navngivningsregler:

  • Må begynde med bogstav A-Z eller a-z
  • Kan følges af: bogstaver (A-Za-z), tal (0-9), bindestreg ("-") og understreg ("_")

Flere eksempler

Eksempel 2

Tilføj flere klasser til en 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>En afsnit.</p>
</body>
</html>

Prøv det selv

Eksempel 3

Brug JavaScript til at tilføje en gul baggrundsfarve til den første element med class="example" (indeks 0).

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

Prøv det selv

Eksempel 4

Brug JavaScript til at tilføje "mystyle" klassen til elementet med id "myDIV":

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

Prøv det selv

Browserstøtte

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