Herausforderung: Dynamische Stile auf DOM-Elemente Anwenden
Aufgabe
Es soll eine interaktive Karte erstellt werden, deren Erscheinungsbild sich basierend auf Benutzeraktionen verändert. Benutzer können die Hintergrundfarbe der Karte ändern, ihre Größe anpassen und einen "hervorgehobenen" Zustand für zusätzliche Stile umschalten.
- Inline-Stile ändern: Beim Klick auf den Button:
- Die Hintergrundfarbe des
<div>
mit der IDcard
auf"lightblue"
setzen; - Die Breite der Karte auf
"300px"
festlegen; - Einen Rahmen von
2px solid #333
um die Karte hinzufügen.
- Die Hintergrundfarbe des
- Highlight-Klasse umschalten: Beim Klick auf den Button:
- Die Klasse
highlight
beim<div>
mit der IDcard
hinzufügen oder entfernen.
- Die Klasse
- Dark-Theme-Klasse hinzufügen: Beim Klick auf den Button:
- Die Klasse
dark-theme
beim<body>
hinzufügen oder entfernen, um das Theme der Seite zu wechseln.
- Die Klasse
index.html
index.css
index.js
style.backgroundColor
verwenden, um die Hintergrundfarbe des<div>
mit der IDcard
auf"lightblue"
zu setzen;style.width
verwenden, um die Breite der Karte auf"300px"
festzulegen;style.border
verwenden, um einen Rahmen von2px solid #333
um die Karte hinzuzufügen;classList.toggle()
verwenden, um die Klassehighlight
beim<div>
mit der IDcard
hinzuzufügen oder zu entfernen;classList.toggle()
verwenden, um die Klassedark-theme
beim<body>
hinzuzufügen oder zu entfernen, wodurch das Theme der Seite gewechselt wird.
index.html
index.css
index.js
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Can you show me how to implement the button that changes the card's appearance?
How should the CSS for the `highlight` and `dark-theme` classes look?
Can you provide a complete example with HTML, CSS, and JavaScript?
Awesome!
Completion rate improved to 2.22
Herausforderung: Dynamische Stile auf DOM-Elemente Anwenden
Swipe um das Menü anzuzeigen
Aufgabe
Es soll eine interaktive Karte erstellt werden, deren Erscheinungsbild sich basierend auf Benutzeraktionen verändert. Benutzer können die Hintergrundfarbe der Karte ändern, ihre Größe anpassen und einen "hervorgehobenen" Zustand für zusätzliche Stile umschalten.
- Inline-Stile ändern: Beim Klick auf den Button:
- Die Hintergrundfarbe des
<div>
mit der IDcard
auf"lightblue"
setzen; - Die Breite der Karte auf
"300px"
festlegen; - Einen Rahmen von
2px solid #333
um die Karte hinzufügen.
- Die Hintergrundfarbe des
- Highlight-Klasse umschalten: Beim Klick auf den Button:
- Die Klasse
highlight
beim<div>
mit der IDcard
hinzufügen oder entfernen.
- Die Klasse
- Dark-Theme-Klasse hinzufügen: Beim Klick auf den Button:
- Die Klasse
dark-theme
beim<body>
hinzufügen oder entfernen, um das Theme der Seite zu wechseln.
- Die Klasse
index.html
index.css
index.js
style.backgroundColor
verwenden, um die Hintergrundfarbe des<div>
mit der IDcard
auf"lightblue"
zu setzen;style.width
verwenden, um die Breite der Karte auf"300px"
festzulegen;style.border
verwenden, um einen Rahmen von2px solid #333
um die Karte hinzuzufügen;classList.toggle()
verwenden, um die Klassehighlight
beim<div>
mit der IDcard
hinzuzufügen oder zu entfernen;classList.toggle()
verwenden, um die Klassedark-theme
beim<body>
hinzuzufügen oder zu entfernen, wodurch das Theme der Seite gewechselt wird.
index.html
index.css
index.js
Danke für Ihr Feedback!