Ändra Elementstilar med JavaScript

Inom webbutveckling behöver vi ofta ändra elementens stilar dynamiskt. JavaScript erbjuder två huvudsakliga sätt att ändra utseendet på element: uppdatering av inline-stilar med hjälp av egenskapen style och hantering av klasser med classList.

Ändra inline-stilar med hjälp av style-egenskapen

Egenskapen style i JavaScript gör det möjligt att direkt modifiera den inline CSS som tillhör ett HTML-element. Denna metod ger full kontroll över enskilda CSS-egenskaper men är begränsad till inline-stilar och påverkar endast det specifika elementet.

Vi kan ändra enskilda CSS-egenskaper genom att använda punktnotation på style-objektet för ett element. Egenskapsnamnen skrivs i camelCase (t.ex. backgroundColor istället för background-color).

index.html

index.css

index.js

style-egenskapen används för att modifiera de inbyggda stilarna för #box-elementet. Varje CSS-egenskap nås som en individuell JavaScript-egenskap (t.ex. box.style.backgroundColor), vilket möjliggör dynamisk ändring av specifika aspekter av elementets stil.

Lägga till och ta bort CSS-klasser med classList

classList-egenskapen erbjuder ett mer flexibelt och kraftfullt sätt att hantera stilar för ett element genom att lägga till, ta bort eller växla CSS-klasser. Denna metod är mer underhållsvänlig än att direkt ändra inbyggda stilar, eftersom den gör det möjligt att dra nytta av externa CSS-filer och hålla din styling separat från din JavaScript-logik.

index.html

index.css

index.js

classList.toggle() används för att lägga till eller ta bort klassen highlight när knappen klickas. Denna metod undviker att belamra det inbyggda attributet style och förlitar sig på fördefinierade CSS-regler för bättre underhållbarhet.

Praktiskt exempel: Växla teman

Här är ett praktiskt exempel där användaren kan växla mellan ett ljust och mörkt tema med hjälp av classList.

index.html

index.css

index.js

classList.replace() används för att byta ut klasserna light-theme och dark-theme baserat på det aktuella tillståndet.

1. Vilken egenskap används för att ändra inline-stilar för ett element?

2. Hur skulle du ändra bakgrundsfärgen på en `<div>` med ID `box` till coral med JavaScript?

3. Vad gör följande kod?

Vilken egenskap används för att ändra inline-stilar för ett element?

Select the correct answer

style

classList

getComputedStyle()

Hur skulle du ändra bakgrundsfärgen på en <div> med ID box till coral med 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');

Vad gör följande kod?

Select the correct answer

Den lägger till klassen active om den inte finns; tar bort den om den redan finns.

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

Den lägger endast till klassen active utan att ta bort den.

Den ändrar bakgrundsfärgen till active.

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 12

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

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

Ändra Elementstilar med JavaScript

Svep för att visa menyn

Ändra inline-stilar med hjälp av style-egenskapen

index.html

index.css

index.js

Lägga till och ta bort CSS-klasser med classList

index.html

index.css

index.js

Praktiskt exempel: Växla teman

Här är ett praktiskt exempel där användaren kan växla mellan ett ljust och mörkt tema med hjälp av classList.

index.html

index.css

index.js

classList.replace() används för att byta ut klasserna light-theme och dark-theme baserat på det aktuella tillståndet.

1. Vilken egenskap används för att ändra inline-stilar för ett element?

2. Hur skulle du ändra bakgrundsfärgen på en `<div>` med ID `box` till coral med JavaScript?

3. Vad gör följande kod?

Vilken egenskap används för att ändra inline-stilar för ett element?

Select the correct answer

style

classList

getComputedStyle()

Hur skulle du ändra bakgrundsfärgen på en <div> med ID box till coral med 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');

Vad gör följande kod?

Select the correct answer

Den lägger till klassen active om den inte finns; tar bort den om den redan finns.

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

Den lägger endast till klassen active utan att ta bort den.

Den ändrar bakgrundsfärgen till active.

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 12

Ändra Elementstilar med JavaScript

Ändra inline-stilar med hjälp av style-egenskapen

Lägga till och ta bort CSS-klasser med classList

Praktiskt exempel: Växla teman

1. Vilken egenskap används för att ändra inline-stilar för ett element?

2. Hur skulle du ändra bakgrundsfärgen på en <div> med ID box till coral med JavaScript?

3. Vad gör följande kod?

Awesome!

Ändra Elementstilar med JavaScript

Ändra inline-stilar med hjälp av style-egenskapen

Lägga till och ta bort CSS-klasser med classList

Praktiskt exempel: Växla teman

1. Vilken egenskap används för att ändra inline-stilar för ett element?

2. Hur skulle du ändra bakgrundsfärgen på en <div> med ID box till coral med JavaScript?

3. Vad gör följande kod?

2. Hur skulle du ändra bakgrundsfärgen på en `<div>` med ID `box` till coral med JavaScript?

2. Hur skulle du ändra bakgrundsfärgen på en `<div>` med ID `box` till coral med JavaScript?