Class Attributten i HTML

En klasse kan bruges til hurtigt og nemt at ændre CSS stilen på et element, men bliver også brugt når man koder i JavaScript.

720 visninger

Edited: 2018-08-19 10:22

class attributten kan bruges til at gruppere elementer, og derved gøre det nemmere at designe en side med CSS. Modsat id'er kan man have lige så mange classes som man ønsker på en side.

Det kan være en fordel at give lister en klasse for sig, da man ofte vil have flere forskellige typer af lister på en side. Lister vil eksempelvis ofte blive brugt til navigations links på en side, og her kan man med fordel anvende klasser, for nemmere at kende forskel på listerne når man skal kode CSS.

Brugen af CLASS i CSS

Hvis man vil have, at et element skal tilhøre flere klasser, så skal man adskille klasserne med mellemrum:

<p class="KlasseNavn EnAndenKlasse">En lille tekst..</p>

Når man skal ændre på et element via klassen i CSS, så bruges punktum (.) foran klasse navne, ligesom det bliver vist i eksemplet nedenfor:

.KlasseNavn {
  color:red;
}

Brugen af CLASS i JavaScript

Når man koder JavaScript, kan man vælge elementer via deres class names. Hvordan det skal gøres afhænger af, om man benytter ren JavaScript, eller om man benytter et bibliotek som eksempelvis JQuery.

I ren JavaScript kan man bruge querySelectorAll(".MinKlasse") eller getElementsByClassName("MinKlasse") til at returnere et array indeholdende en reference til alle elementerne.

Der er den forskel, at querySelectorAll gør det muligt at anvende CSS syntax. Ulempen er, at querySelectorAll ikke arbejder med live elementer. Dvs. Hvis et element ændre sig, efter man har brugt funktionen, så skal man kalde funktionen igen, for at få det opdaterede indhold med.

var x = document.getElementsByClassName("MinKlasse");
x[0].innerHTML = "Hej verden!";

Vil man automatisk ændre indholdet i alle elementerne, så kan man lave loop der køre indtil x.length er nået. Length bliver brugt til at tælle hvor mange elementer der findes i vores array (x).

var x = document.getElementsByClassName("MinKlasse");
var i;
for (i = 0; i < x.length; i++) {
  x[i].innerHTML = "Hej verden!";
}

Ovenstående forudsætter selvfølgelig, at vi har HTML elementer med klassen "MinKlasse" på en side.

Vælger man querySelectorAll, kan man anvende funktionen på samme måde:

var x = document.querySelectorAll(".MinKlasse");
x[0].innerHTML = "Hej verden!";

Der er en tilsvarende funktion, querySelector(), men den returnere kun det første element, når man bruger den på klasser, og derfor er den nok bedre egnet til elementer med unikke ID'er.

Fortæl os hvad du tænker: