Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Herausforderung: Ändern von Elementstilen | DOM-Manipulation
Fortgeschrittene JavaScript-Meisterschaft
course content

Kursinhalt

Fortgeschrittene JavaScript-Meisterschaft

Fortgeschrittene JavaScript-Meisterschaft

1. Klassen
Willkommen Zum KursKlassendeklarationHerausforderung: Eine Klasse ErstellenKlassenmethodenHerausforderung: Methoden zu einer Klasse HinzufügenParameterobjektPrivate EigenschaftenHerausforderung: Implementierung Privater Properties in Einer KlasseGetter und SetterHerausforderung: Verwalten von Eigenschaften mit Getters und SettersStatische EigenschaftenStatische MethodenHerausforderung: Verwenden von Statischen Eigenschaften und Methoden in Einer KlasseVererbung mit Extends und Verwendung von Super()Herausforderung: Klassenvererbung mit extends und Verwendung von super
2. DOM-Manipulation
Was Ist das DOM?Abfragen des DOMHerausforderung: Abfragen des DOMVerstehen der DOM-HierarchieHerausforderung: DOM-HierarchieDOM-EigenschaftenArbeiten mit Element-AttributenHerausforderung: Arbeiten mit Element-Eigenschaften und -AttributenElemente HinzufügenElemente EntfernenHerausforderung: Hinzufügen und Entfernen von ElementenÄndern von ElementstilenHerausforderung: Ändern von Elementstilen
3. Ereignisse und Ereignisbehandlung
Einführung in Ereignisse und Ereignis-ListenerDas EreignisobjektHerausforderung: Ereignisse und Event-ListenerEreignisausbreitung und DelegierungHerausforderung: Ereignisausbreitung und DelegationTastatur- und MausereignisseVerwalten von Event-Listenern
4. Asynchrones JavaScript und APIs
Einführung in Asynchrones JavaScriptRückrufeVersprechenAsync/AwaitArbeiten mit APIsPraktische API-IntegrationHerausforderung: Arbeiten mit APIArbeiten Mit DrittanbieterbibliothekenHerausforderung: Arbeiten mit Drittanbieter-BibliothekenUmgang mit Mehreren Asynchronen Anfragen

book
Herausforderung: Ändern von Elementstilen

Aufgabe

Du erstellst eine interaktive Karte, die ihr Aussehen basierend auf Benutzeraktionen ändern kann. Benutzer können die Hintergrundfarbe der Karte ändern, sie in der Größe anpassen und einen "hervorgehobenen" Zustand für zusätzliche Stile umschalten.

  1. Ändere Inline-Stile : Wenn der Button geklickt wird:

    • Ändere die Hintergrundfarbe des <div> mit der ID card zu "lightblue" ;

    • Setze die Breite der Karte auf "300px" ;

    • Füge einen 2px solid #333 Rahmen um die Karte hinzu.

  2. Umschalten einer Highlight-Klasse : Wenn der Button geklickt wird:

    • Füge die highlight Klasse zum <div> mit der ID card hinzu oder entferne sie.

  3. Füge eine Dark-Theme-Klasse hinzu : Wenn der Button geklickt wird:

    • Füge die dark-theme Klasse zum <body> hinzu oder entferne sie, was das Thema der Seite umschalten sollte.

html

index.html

css

index.css

js

index.js

copy

  • Verwenden Sie style.backgroundColor , um die Hintergrundfarbe des <div> mit der ID card auf "lightblue" zu ändern;

  • Verwenden Sie style.width , um die Breite der Karte auf "300px" zu setzen;

  • Verwenden Sie style.border , um einen 2px solid #333 Rahmen um die Karte hinzuzufügen;

  • Verwenden Sie classList.toggle() , um die highlight Klasse auf dem <div> mit der ID card hinzuzufügen oder zu entfernen;

  • Verwenden Sie classList.toggle() , um die dark-theme Klasse auf dem <body> hinzuzufügen oder zu entfernen, was das Thema der Seite umschalten sollte.

html

index.html

css

index.css

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
ChatGPT

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

course content

Kursinhalt

Fortgeschrittene JavaScript-Meisterschaft

Fortgeschrittene JavaScript-Meisterschaft

1. Klassen
Willkommen Zum KursKlassendeklarationHerausforderung: Eine Klasse ErstellenKlassenmethodenHerausforderung: Methoden zu einer Klasse HinzufügenParameterobjektPrivate EigenschaftenHerausforderung: Implementierung Privater Properties in Einer KlasseGetter und SetterHerausforderung: Verwalten von Eigenschaften mit Getters und SettersStatische EigenschaftenStatische MethodenHerausforderung: Verwenden von Statischen Eigenschaften und Methoden in Einer KlasseVererbung mit Extends und Verwendung von Super()Herausforderung: Klassenvererbung mit extends und Verwendung von super
2. DOM-Manipulation
Was Ist das DOM?Abfragen des DOMHerausforderung: Abfragen des DOMVerstehen der DOM-HierarchieHerausforderung: DOM-HierarchieDOM-EigenschaftenArbeiten mit Element-AttributenHerausforderung: Arbeiten mit Element-Eigenschaften und -AttributenElemente HinzufügenElemente EntfernenHerausforderung: Hinzufügen und Entfernen von ElementenÄndern von ElementstilenHerausforderung: Ändern von Elementstilen
3. Ereignisse und Ereignisbehandlung
Einführung in Ereignisse und Ereignis-ListenerDas EreignisobjektHerausforderung: Ereignisse und Event-ListenerEreignisausbreitung und DelegierungHerausforderung: Ereignisausbreitung und DelegationTastatur- und MausereignisseVerwalten von Event-Listenern
4. Asynchrones JavaScript und APIs
Einführung in Asynchrones JavaScriptRückrufeVersprechenAsync/AwaitArbeiten mit APIsPraktische API-IntegrationHerausforderung: Arbeiten mit APIArbeiten Mit DrittanbieterbibliothekenHerausforderung: Arbeiten mit Drittanbieter-BibliothekenUmgang mit Mehreren Asynchronen Anfragen

book
Herausforderung: Ändern von Elementstilen

Aufgabe

Du erstellst eine interaktive Karte, die ihr Aussehen basierend auf Benutzeraktionen ändern kann. Benutzer können die Hintergrundfarbe der Karte ändern, sie in der Größe anpassen und einen "hervorgehobenen" Zustand für zusätzliche Stile umschalten.

  1. Ändere Inline-Stile : Wenn der Button geklickt wird:

    • Ändere die Hintergrundfarbe des <div> mit der ID card zu "lightblue" ;

    • Setze die Breite der Karte auf "300px" ;

    • Füge einen 2px solid #333 Rahmen um die Karte hinzu.

  2. Umschalten einer Highlight-Klasse : Wenn der Button geklickt wird:

    • Füge die highlight Klasse zum <div> mit der ID card hinzu oder entferne sie.

  3. Füge eine Dark-Theme-Klasse hinzu : Wenn der Button geklickt wird:

    • Füge die dark-theme Klasse zum <body> hinzu oder entferne sie, was das Thema der Seite umschalten sollte.

html

index.html

css

index.css

js

index.js

copy

  • Verwenden Sie style.backgroundColor , um die Hintergrundfarbe des <div> mit der ID card auf "lightblue" zu ändern;

  • Verwenden Sie style.width , um die Breite der Karte auf "300px" zu setzen;

  • Verwenden Sie style.border , um einen 2px solid #333 Rahmen um die Karte hinzuzufügen;

  • Verwenden Sie classList.toggle() , um die highlight Klasse auf dem <div> mit der ID card hinzuzufügen oder zu entfernen;

  • Verwenden Sie classList.toggle() , um die dark-theme Klasse auf dem <body> hinzuzufügen oder zu entfernen, was das Thema der Seite umschalten sollte.

html

index.html

css

index.css

js

index.js

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 13
Wir sind enttäuscht, dass etwas schief gelaufen ist. Was ist passiert?
some-alt