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: