Ændring af Elementers Stilarter med JavaScript

Inden for webudvikling har vi ofte behov for dynamisk at ændre elementers stilarter. JavaScript tilbyder to primære metoder til at ændre udseendet af elementer: opdatering af inline-stilarter ved hjælp af style-egenskaben og håndtering af klasser med classList.

Ændring af inline-stilarter ved hjælp af style-egenskaben

style-egenskaben i JavaScript gør det muligt direkte at ændre den inline CSS for et HTML-element. Denne metode giver fuld kontrol over individuelle CSS-egenskaber, men er begrænset til inline-stilarter og påvirker kun det specifikke element.

Individuelle CSS-egenskaber kan ændres ved at bruge dot notation på style-objektet for et element. Egenskabsnavne skrives i camelCase (f.eks. backgroundColor i stedet for background-color).

index.html

index.css

index.js

Egenskaben style bruges til at ændre de inline-stilarter, der er knyttet til #box-elementet. Hver CSS-egenskab tilgås som en individuel JavaScript-egenskab (f.eks. box.style.backgroundColor), hvilket gør det muligt at ændre specifikke aspekter af elementets stil dynamisk.

Tilføjelse og fjernelse af CSS-klasser med classList

Egenskaben classList giver en mere fleksibel og effektiv måde at håndtere et elements stilarter på ved at tilføje, fjerne eller skifte CSS-klasser. Denne metode er mere vedligeholdelsesvenlig end direkte ændring af inline-stilarter, da den gør det muligt at udnytte eksterne CSS-filer og holde din styling adskilt fra din JavaScript-logik.

index.html

index.css

index.js

classList.toggle() bruges til at tilføje eller fjerne highlight-klassen, når knappen klikkes. Denne metode undgår at overbelaste den inline style-attribut og benytter foruddefinerede CSS-regler for bedre vedligeholdelse.

Praktisk eksempel: Skift af tema

Her er et praktisk eksempel, hvor brugeren kan skifte mellem et lyst og et mørkt tema ved hjælp af classList.

index.html

index.css

index.js

classList.replace() bruges til at udskifte light-theme og dark-theme klasserne baseret på den aktuelle tilstand.

1. Hvilken egenskab bruges til at ændre inline-stilarter for et element?

2. Hvordan ændres baggrundsfarven på en `<div>` med ID'et `box` til coral ved hjælp af JavaScript?

3. Hvad gør følgende kode?

Hvilken egenskab bruges til at ændre inline-stilarter for et element?

Select the correct answer

style

classList

getComputedStyle()

Hvordan ændres baggrundsfarven på en <div> med ID'et box til coral ved hjælp af JavaScript?

Select the correct answer

document.getElementById('box').classList.add('coral');

document.getElementById('box').style.color = 'coral';

document.getElementById('box').style.backgroundColor = 'coral';

document.getElementById('box').setAttribute('backgroundColor', 'coral');

Hvad gør følgende kode?

Select the correct answer

Den tilføjer active-klassen, hvis den ikke findes; fjerner den, hvis den findes.

Den sætter active-klassen som en inline-stil på knappen.

Den tilføjer kun active-klassen uden at fjerne den.

Den ændrer baggrundsfarven til active.

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 12

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Suggested prompts:

Can you show me an example of how to use the style property in JavaScript?

How do I use classList to switch between themes?

What are the advantages of using classList over inline styles?

Awesome!

Completion rate improved to 2.22

Ændring af Elementers Stilarter med JavaScript

Stryg for at vise menuen

Ændring af inline-stilarter ved hjælp af style-egenskaben

Individuelle CSS-egenskaber kan ændres ved at bruge dot notation på style-objektet for et element. Egenskabsnavne skrives i camelCase (f.eks. backgroundColor i stedet for background-color).

index.html

index.css

index.js

Tilføjelse og fjernelse af CSS-klasser med classList

index.html

index.css

index.js

Praktisk eksempel: Skift af tema

Her er et praktisk eksempel, hvor brugeren kan skifte mellem et lyst og et mørkt tema ved hjælp af classList.

index.html

index.css

index.js

classList.replace() bruges til at udskifte light-theme og dark-theme klasserne baseret på den aktuelle tilstand.

1. Hvilken egenskab bruges til at ændre inline-stilarter for et element?

2. Hvordan ændres baggrundsfarven på en `<div>` med ID'et `box` til coral ved hjælp af JavaScript?

3. Hvad gør følgende kode?

Hvilken egenskab bruges til at ændre inline-stilarter for et element?

Select the correct answer

style

classList

getComputedStyle()

Hvordan ændres baggrundsfarven på en <div> med ID'et box til coral ved hjælp af JavaScript?

Select the correct answer

document.getElementById('box').classList.add('coral');

document.getElementById('box').style.color = 'coral';

document.getElementById('box').style.backgroundColor = 'coral';

document.getElementById('box').setAttribute('backgroundColor', 'coral');

Hvad gør følgende kode?

Select the correct answer

Den tilføjer active-klassen, hvis den ikke findes; fjerner den, hvis den findes.

Den sætter active-klassen som en inline-stil på knappen.

Den tilføjer kun active-klassen uden at fjerne den.

Den ændrer baggrundsfarven til active.

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 12

Ændring af Elementers Stilarter med JavaScript

Ændring af inline-stilarter ved hjælp af style-egenskaben

Tilføjelse og fjernelse af CSS-klasser med classList

Praktisk eksempel: Skift af tema

1. Hvilken egenskab bruges til at ændre inline-stilarter for et element?

2. Hvordan ændres baggrundsfarven på en <div> med ID'et box til coral ved hjælp af JavaScript?

3. Hvad gør følgende kode?

Awesome!

Ændring af Elementers Stilarter med JavaScript

Ændring af inline-stilarter ved hjælp af style-egenskaben

Tilføjelse og fjernelse af CSS-klasser med classList

Praktisk eksempel: Skift af tema

1. Hvilken egenskab bruges til at ændre inline-stilarter for et element?

2. Hvordan ændres baggrundsfarven på en <div> med ID'et box til coral ved hjælp af JavaScript?

3. Hvad gør følgende kode?

2. Hvordan ændres baggrundsfarven på en `<div>` med ID'et `box` til coral ved hjælp af JavaScript?

2. Hvordan ændres baggrundsfarven på en `<div>` med ID'et `box` til coral ved hjælp af JavaScript?