Endre Elementstiler med JavaScript

I webutvikling må vi ofte endre elementstiler dynamisk. JavaScript tilbyr to hovedmetoder for å endre utseendet til elementer: oppdatering av inline-stiler ved hjelp av style-egenskapen og håndtering av klasser med classList.

Endre inline-stiler med style-egenskapen

style-egenskapen i JavaScript lar deg direkte endre den inline CSS-en til et HTML-element. Denne metoden gir deg full kontroll over individuelle CSS-egenskaper, men er begrenset til inline-stiler og påvirker kun det spesifikke elementet.

Vi kan endre individuelle CSS-egenskaper ved å bruke punktnotasjon på style-objektet til et element. Egenskapsnavnene skrives i camelCase (for eksempel backgroundColor i stedet for background-color).

index.html

index.css

index.js

Egenskapen style brukes til å endre de inline stilene til #box-elementet. Hver CSS-egenskap kan nås som en individuell JavaScript-egenskap (for eksempel box.style.backgroundColor), noe som gjør det mulig å endre bestemte aspekter av elementets stil dynamisk.

Legge til og fjerne CSS-klasser med classList

Egenskapen classList gir en mer fleksibel og kraftig måte å håndtere stilene til et element på ved å legge til, fjerne eller veksle CSS-klasser. Denne metoden er mer vedlikeholdbar enn å endre inline stiler direkte, siden du kan dra nytte av eksterne CSS-filer og holde stilene adskilt fra JavaScript-logikken din.

index.html

index.css

index.js

classList.toggle() brukes for å legge til eller fjerne highlight-klassen når knappen klikkes. Denne metoden unngår å fylle opp den innebygde style-attributten og baserer seg på forhåndsdefinerte CSS-regler for bedre vedlikeholdbarhet.

Praktisk eksempel: Bytte tema

Her er et praktisk eksempel der brukeren kan bytte mellom lyst og mørkt tema ved hjelp av classList.

index.html

index.css

index.js

classList.replace() brukes for å bytte mellom klassene light-theme og dark-theme basert på gjeldende tilstand.

1. Hvilken egenskap brukes for å endre inline-stiler til et element?

2. Hvordan endrer du bakgrunnsfargen til en `<div>` med ID `box` til coral ved hjelp av JavaScript?

3. Hva gjør følgende kode?

Hvilken egenskap brukes for å endre inline-stiler til et element?

Select the correct answer

style

classList

getComputedStyle()

Hvordan endrer du bakgrunnsfargen til en <div> med ID box til coral ved hjelp av 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');

Hva gjør følgende kode?

Select the correct answer

Legger til active-klassen hvis den ikke finnes; fjerner den hvis den finnes.

Setter active-klassen som en inline-stil på knappen.

Legger kun til active-klassen uten å fjerne den.

Endrer bakgrunnsfargen til aktiv.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 12

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Awesome!

Completion rate improved to 2.22

Endre Elementstiler med JavaScript

Sveip for å vise menyen

Endre inline-stiler med style-egenskapen

index.html

index.css

index.js

Legge til og fjerne CSS-klasser med classList

index.html

index.css

index.js

Praktisk eksempel: Bytte tema

Her er et praktisk eksempel der brukeren kan bytte mellom lyst og mørkt tema ved hjelp av classList.

index.html

index.css

index.js

classList.replace() brukes for å bytte mellom klassene light-theme og dark-theme basert på gjeldende tilstand.

1. Hvilken egenskap brukes for å endre inline-stiler til et element?

2. Hvordan endrer du bakgrunnsfargen til en `<div>` med ID `box` til coral ved hjelp av JavaScript?

3. Hva gjør følgende kode?

Hvilken egenskap brukes for å endre inline-stiler til et element?

Select the correct answer

style

classList

getComputedStyle()

Hvordan endrer du bakgrunnsfargen til en <div> med ID box til coral ved hjelp av 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');

Hva gjør følgende kode?

Select the correct answer

Legger til active-klassen hvis den ikke finnes; fjerner den hvis den finnes.

Setter active-klassen som en inline-stil på knappen.

Legger kun til active-klassen uten å fjerne den.

Endrer bakgrunnsfargen til aktiv.

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 12

Endre Elementstiler med JavaScript

Endre inline-stiler med style-egenskapen

Legge til og fjerne CSS-klasser med classList

Praktisk eksempel: Bytte tema

1. Hvilken egenskap brukes for å endre inline-stiler til et element?

2. Hvordan endrer du bakgrunnsfargen til en <div> med ID box til coral ved hjelp av JavaScript?

3. Hva gjør følgende kode?

Awesome!

Endre Elementstiler med JavaScript

Endre inline-stiler med style-egenskapen

Legge til og fjerne CSS-klasser med classList

Praktisk eksempel: Bytte tema

1. Hvilken egenskap brukes for å endre inline-stiler til et element?

2. Hvordan endrer du bakgrunnsfargen til en <div> med ID box til coral ved hjelp av JavaScript?

3. Hva gjør følgende kode?

2. Hvordan endrer du bakgrunnsfargen til en `<div>` med ID `box` til coral ved hjelp av JavaScript?

2. Hvordan endrer du bakgrunnsfargen til en `<div>` med ID `box` til coral ved hjelp av JavaScript?