Sådan manipuleres klasser uden jQuery ved hjælp af HTML5s classList API

Som frontend-udvikler er du ofte nødt til at ændre CSS-regler baseret på, hvordan en bruger interagerer med elementer på en side.

Tidligere stolede jeg på jQuery til at håndtere denne slags DOM-manipulationer for mig. Men i nogle tilfælde giver det ikke mening at importere hele jQuery-biblioteket, bare så du kan udføre nogle grundlæggende DOM-manipulationer.

Heldigvis tilbyder HTML5 en måde at gøre dette indbygget uden behov for jQuery.

Hvordan jeg opdagede HTML5s classList-metode

For et par dage siden læste jeg noget kode. Jeg bemærkede, at et projekt indeholdt jQuery som en afhængighed, bare så de kunne tilføje og fjerne klasser, når brugeren klikkede på en knap på siden. Hele interaktionskoden var kun 11 linjer kode.

Jeg syntes, det var underligt, at de gjorde det på denne måde. Det svarede til at bruge en bazooka (jQuery) til at dræbe en myg (tilføjelse og fjernelse af klasser ved et klik).

Det faldt mig ind, at jeg sandsynligvis havde gjort lignende ting i mine tidligere kodningsprojekter. Så jeg besluttede at prøve at replikere den samme funktionalitet ved hjælp af almindeligt JavaScript og se, hvad jeg kan lære af det.

En hurtig søgning viste flere muligheder for at gøre dette i almindeligt JavaScript. Jeg gik med classList- metoden, fordi den er let at forstå, og support på tværs af browsere er ret god.

Bemærk, at hvis du har brug for at understøtte Internet Explorer-versioner, der er ældre end IE 11, skal du muligvis finde en alternativ metode eller bruge en polyfyldning.

Hvis du er helt afhængig af at bruge jQuery til DOM-håndtering, er dette et godt sted at begynde at få en vis uafhængighed af jQuery.

Hvad er classList API?

HTML5 classList API giver en måde at få fat i alle de klasser, der er knyttet til et element, så du kan bruge JavaScript til at ændre dem.

Brug af classList DOM-egenskaben på et element returnerer en DOMTokenList . Dette indeholder alle de klasser, der er anvendt på et element, og egenskaben længde , der angiver det samlede antal klasser på dette element.

Se på dette eksempel:

//JavaScriptvar about = document.getElementById("about"); console.log(about.classList); //logs { 0: "content-wrapper" 1: "about" 2: "animated" length: 3 value: "content-wrapper about animated" }

Du kan prøve ovenstående i din browser for at se det i aktion.

At få klasser af et element er alt godt og godt, men det er ikke så nyttigt alene. Vi har brug for en måde at styre og opdatere disse klasser på. Egenskaben classList giver et par metoder, der gør netop det:

  • add () : Tilføjer specificerede klasser
  • remove () : Fjerner angivne klasser
  • indeholder () : Kontrollerer, om den angivne klasse findes på elementet
  • skifte () : skifter angivet klasse
  • indeks () : returnerer klassen på en bestemt position på listen
  • længde : returnerer antallet af klasser

Lad os se på hver efter hinanden.

Tilføjelse af klasser

Tilføjelse af en klasse til et element er ligetil. Anvend bare klassens navn som et argument på add () -metoden. Bemærk, at hvis klassens navn allerede findes på elementet, tilføjes det ikke igen.

//JavaScriptdocument.getElementById("headline").classList.add("title"); //gives

For at tilføje flere klasser skal du adskille hver klasse med et komma:

//JavaScriptdocument.getElementById("headline").classList.add("title", "headline"); //gives

Fjernelse af klasser

For at fjerne en klasse er alt, hvad du skal gøre, at videregive klassens navn som et argument til metoden remove () . Hvis klassenavnet ikke allerede findes i classList , kastes en fejl.

//JavaScriptdocument.getElementById("header").classList.remove("masthead"); //gives

For at fjerne flere klasser skal du adskille hver klasse med et komma:

//JavaScriptdocument.getElementById("header").classList.remove("masthead", "headline"); //gives

Kontroller, om der findes en klasse

Ved hjælp af metoden indeholder () kan vi kontrollere, om en bestemt klasse er til stede i et elements classList og udføre operationer baseret på returværdien.

For eksempel:

Click Me
//JavaScriptvar button = document.getElementById("btn"); if (button.classList.contains("hidden")) { //do something } else { //do something else}

Skiftende klasser

Tilføjelse eller fjernelse af en klasse baseret på brugerhandling er en almindelig ting at gøre. Dette var præcis, hvad jeg ønskede at opnå med classList.

Du kan skifte mellem at tilføje og fjerne ved hjælp af metoden toggle () .

Her er hvad jeg til sidst gjorde:

//JavaScriptvar page = document.getElementById("page"); var menu = document.getElementById("menu"); var nav = document.getElementById("navigation"); 
function hasClass() { page.classList.toggle("open"); menu.classList.toggle("active"); nav.classList.toggle("hidden"); }

Kontroller antallet af klasser

For at finde ud af, hvor mange klasser der anvendes på et element, skal du bruge længdeegenskaben :

//JavaScriptdocument.getElementById("navbar").classList.length; // 2

Afslutter

Som du kan se, er classList API let at bruge. Jeg opfordrer dig til at begynde at udforske dens evner i dine egne applikationer.

Efterlad også en kommentar, hvis du har spørgsmål, eller kontakt mig på Twitter. For flere artikler som denne, tjek min blog. Tak for læsningen!