Utmaning: Tillämpa Dynamiska Stilar på DOM-Element
Uppgift
Du skapar ett interaktivt kort som kan ändra sitt utseende baserat på användarens handlingar. Användare kan ändra bakgrundsfärgen på kortet, ändra dess storlek och växla ett "highlighted"-läge för ytterligare stil.
- Ändra inbyggda stilar: När knappen klickas:
- Ändra bakgrundsfärgen på
<div>
med IDcard
till"lightblue"
; - Sätt bredden på kortet till
"300px"
; - Lägg till en
2px solid #333
ram runt kortet.
- Ändra bakgrundsfärgen på
- Växla en Highlight-klass: När knappen klickas:
- Lägg till eller ta bort klassen
highlight
på<div>
med IDcard
.
- Lägg till eller ta bort klassen
- Lägg till en Dark Theme-klass: När knappen klickas:
- Lägg till eller ta bort klassen
dark-theme
på<body>
, vilket ska byta sidans tema.
- Lägg till eller ta bort klassen
index.html
index.css
index.js
- Använd
style.backgroundColor
för att ändra bakgrundsfärgen på<div>
med IDcard
till"lightblue"
; - Använd
style.width
för att sätta bredden på kortet till"300px"
; - Använd
style.border
för att lägga till en2px solid #333
ram runt kortet; - Använd
classList.toggle()
för att lägga till eller ta bort klassenhighlight
på<div>
med IDcard
; - Använd
classList.toggle()
för att lägga till eller ta bort klassendark-theme
på<body>
, vilket ska byta sidans tema.
index.html
index.css
index.js
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 2. Kapitel 13
Fråga AI
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
Awesome!
Completion rate improved to 2.22
Utmaning: Tillämpa Dynamiska Stilar på DOM-Element
Svep för att visa menyn
Uppgift
Du skapar ett interaktivt kort som kan ändra sitt utseende baserat på användarens handlingar. Användare kan ändra bakgrundsfärgen på kortet, ändra dess storlek och växla ett "highlighted"-läge för ytterligare stil.
- Ändra inbyggda stilar: När knappen klickas:
- Ändra bakgrundsfärgen på
<div>
med IDcard
till"lightblue"
; - Sätt bredden på kortet till
"300px"
; - Lägg till en
2px solid #333
ram runt kortet.
- Ändra bakgrundsfärgen på
- Växla en Highlight-klass: När knappen klickas:
- Lägg till eller ta bort klassen
highlight
på<div>
med IDcard
.
- Lägg till eller ta bort klassen
- Lägg till en Dark Theme-klass: När knappen klickas:
- Lägg till eller ta bort klassen
dark-theme
på<body>
, vilket ska byta sidans tema.
- Lägg till eller ta bort klassen
index.html
index.css
index.js
- Använd
style.backgroundColor
för att ändra bakgrundsfärgen på<div>
med IDcard
till"lightblue"
; - Använd
style.width
för att sätta bredden på kortet till"300px"
; - Använd
style.border
för att lägga till en2px solid #333
ram runt kortet; - Använd
classList.toggle()
för att lägga till eller ta bort klassenhighlight
på<div>
med IDcard
; - Använd
classList.toggle()
för att lägga till eller ta bort klassendark-theme
på<body>
, vilket ska byta sidans tema.
index.html
index.css
index.js
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 2. Kapitel 13