Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Herausforderung: Dynamische Stile auf DOM-Elemente Anwenden | DOM-Manipulation für Interaktive Webentwicklung
Fortgeschrittene JavaScript-Beherrschung

bookHerausforderung: 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.

  1. Inline-Stile ändern: Beim Klick auf den Button:
    • Die Hintergrundfarbe des <div> mit der ID card auf "lightblue" setzen;
    • Die Breite der Karte auf "300px" festlegen;
    • Einen Rahmen von 2px solid #333 um die Karte hinzufügen.
  2. Highlight-Klasse umschalten: Beim Klick auf den Button:
    • Die Klasse highlight beim <div> mit der ID card hinzufügen oder entfernen.
  3. 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.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • style.backgroundColor verwenden, um die Hintergrundfarbe des <div> mit der ID card auf "lightblue" zu setzen;
  • style.width verwenden, um die Breite der Karte auf "300px" festzulegen;
  • style.border verwenden, um einen Rahmen von 2px solid #333 um die Karte hinzuzufügen;
  • classList.toggle() verwenden, um die Klasse highlight beim <div> mit der ID card hinzuzufügen oder zu entfernen;
  • classList.toggle() verwenden, um die Klasse dark-theme beim <body> hinzuzufügen oder zu entfernen, wodurch das Theme der Seite gewechselt wird.
index.html

index.html

index.css

index.css

index.js

index.js

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 13

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

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

bookHerausforderung: 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.

  1. Inline-Stile ändern: Beim Klick auf den Button:
    • Die Hintergrundfarbe des <div> mit der ID card auf "lightblue" setzen;
    • Die Breite der Karte auf "300px" festlegen;
    • Einen Rahmen von 2px solid #333 um die Karte hinzufügen.
  2. Highlight-Klasse umschalten: Beim Klick auf den Button:
    • Die Klasse highlight beim <div> mit der ID card hinzufügen oder entfernen.
  3. 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.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • style.backgroundColor verwenden, um die Hintergrundfarbe des <div> mit der ID card auf "lightblue" zu setzen;
  • style.width verwenden, um die Breite der Karte auf "300px" festzulegen;
  • style.border verwenden, um einen Rahmen von 2px solid #333 um die Karte hinzuzufügen;
  • classList.toggle() verwenden, um die Klasse highlight beim <div> mit der ID card hinzuzufügen oder zu entfernen;
  • classList.toggle() verwenden, um die Klasse dark-theme beim <body> hinzuzufügen oder zu entfernen, wodurch das Theme der Seite gewechselt wird.
index.html

index.html

index.css

index.css

index.js

index.js

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 13
some-alt