JavaScript Academy · Lektion

Ændring af attributter og klasser

Brug setAttribute og classList-API'en.

Lektion 3 af 413 trin

Ændring af attributter og klasser er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Attributter og klasser

Elementer har attributter som href eller data-id samt CSS-klasser. JavaScript giver dig præcise API'er til at læse og ændre begge dele.

getAttribute

getAttribute læser værdien af en attribut som en streng eller returnerer null, hvis attributten mangler.

const link = document.querySelector("a");
console.log(link.getAttribute("href"));

setAttribute

setAttribute opretter eller opdaterer en attribut. Værdier er altid strenge.

link.setAttribute("href", "https://example.com");
link.setAttribute("target", "_blank");

removeAttribute og hasAttribute

Brug removeAttribute til at slette en attribut og hasAttribute til at kontrollere, om den findes.

if (link.hasAttribute("target")) {
  link.removeAttribute("target");
}

Egenskaber kontra attributter

Mange attributter findes også som egenskaber på elementet, f.eks. element.id eller input.value. Egenskaber afspejler den aktuelle tilstand, mens attributter ofte indeholder den oprindelige HTML-værdi.

input.value;                 // current value
input.getAttribute("value"); // original default

dataset til data-*

Brugerdefinerede data-*-attributter er tilgængelige via objektet dataset ved hjælp af camelCase-nøgler.

const card = document.querySelector(".card");
console.log(card.dataset.userId); // from data-user-id
card.dataset.state = "open";       // sets data-state

Overblik over classList

classList er et dynamisk objekt til håndtering af klasser uden manuel redigering af className-strengen.

const box = document.querySelector(".box");
console.log(box.classList);

classList.add og remove

add og remove accepterer ét eller flere klassenavne og håndterer dubletter eller manglende klasser uden problemer.

box.classList.add("active", "highlight");
box.classList.remove("hidden");

classList.toggle

toggle tilføjer klassen, hvis den mangler, og fjerner den, hvis den findes. Metoden returnerer en boolesk værdi for den nye tilstand. Et andet argument gennemtvinger aktivering eller deaktivering.

box.classList.toggle("open");
box.classList.toggle("open", true); // force add

classList.contains og replace

contains kontrollerer, om en klasse findes, og replace erstatter én klasse med en anden på stedet.

if (box.classList.contains("active")) {
  box.classList.replace("active", "inactive");
}

Hvorfor classList er bedre end className

Hvis du redigerer className som en streng, risikerer du at overskrive andre klasser. classList ændrer kun de angivne klasser på en sikker måde.

box.className = "active"; // wipes all other classes
box.classList.add("active"); // keeps the rest

Hurtigt tjek

Vælg skifteadfærden.

Besvar den i den interaktive lektion

Opsummering

Læs og skriv attributter med getAttribute/setAttribute/removeAttribute/hasAttribute, og tilgå data-* via dataset. Håndtér klasser med metoderne add, remove, toggle, contains og replace på classList. De er sikrere end at overskrive className.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Ændring af attributter og klasser” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Ændring af attributter og klasser”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Ændring af attributter og klasser”?

Brug setAttribute og classList-API'en. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Ændring af attributter og klasser”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?

Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til JavaScript Academy