Ändern von Elementstilen mit JavaScript

In der Webentwicklung besteht häufig die Notwendigkeit, die Stile von Elementen dynamisch zu verändern. JavaScript bietet zwei Hauptmethoden, um das Erscheinungsbild von Elementen zu ändern: das Aktualisieren von Inline-Stilen über die Eigenschaft style sowie das Verwalten von Klassen mit classList.

Ändern von Inline-Stilen mit der style-Eigenschaft

Die style-Eigenschaft in JavaScript ermöglicht das direkte Modifizieren des Inline-CSS eines HTML-Elements. Diese Methode bietet vollständige Kontrolle über einzelne CSS-Eigenschaften, ist jedoch auf Inline-Stile beschränkt und wirkt sich nur auf das jeweilige Element aus.

Einzelne CSS-Eigenschaften können über die Punktnotation am style-Objekt eines Elements geändert werden. Die Eigenschaftsnamen werden im camelCase geschrieben (z. B. backgroundColor statt background-color).

index.html

index.css

index.js

Die Eigenschaft style wird verwendet, um die Inline-Stile des Elements #box zu ändern. Jede CSS-Eigenschaft kann als einzelne JavaScript-Eigenschaft angesprochen werden (z. B. box.style.backgroundColor), wodurch Sie bestimmte Aspekte des Stils des Elements dynamisch anpassen können.

Hinzufügen und Entfernen von CSS-Klassen mit classList

Die Eigenschaft classList bietet eine flexiblere und leistungsfähigere Möglichkeit, die Stile eines Elements zu verwalten, indem CSS-Klassen hinzugefügt, entfernt oder umgeschaltet werden. Diese Methode ist wartungsfreundlicher als das direkte Ändern von Inline-Stilen, da Sie externe CSS-Dateien nutzen und Ihre Gestaltung von der JavaScript-Logik trennen können.

index.html

index.css

index.js

classList.toggle() wird verwendet, um die Klasse highlight beim Klicken des Buttons hinzuzufügen oder zu entfernen. Diese Methode verhindert eine Überfrachtung des Inline-Attributs style und setzt auf vordefinierte CSS-Regeln für bessere Wartbarkeit.

Praxisbeispiel: Wechseln von Themes

Ein praktisches Beispiel, bei dem der Benutzer mit classList zwischen einem hellen und einem dunklen Theme wechseln kann.

index.html

index.css

index.js

classList.replace() wird verwendet, um die Klassen light-theme und dark-theme je nach aktuellem Zustand auszutauschen.

1. Welche Eigenschaft wird verwendet, um Inline-Stile eines Elements zu ändern?

2. Wie kann die Hintergrundfarbe eines `<div>` mit der ID `box` per JavaScript auf coral gesetzt werden?

3. Was bewirkt der folgende Code?

Welche Eigenschaft wird verwendet, um Inline-Stile eines Elements zu ändern?

Select the correct answer

style

classList

getComputedStyle()

Wie kann die Hintergrundfarbe eines <div> mit der ID box per JavaScript auf coral gesetzt werden?

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');

Was bewirkt der folgende Code?

Select the correct answer

Fügt die Klasse active hinzu, falls sie nicht vorhanden ist; entfernt sie, falls sie vorhanden ist.

Setzt die Klasse active als Inline-Stil auf den Button.

Fügt die Klasse active nur hinzu, ohne sie zu entfernen.

Ändert die Hintergrundfarbe zu active.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 12

Fragen Sie AI

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

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

Ändern von Elementstilen mit JavaScript

Swipe um das Menü anzuzeigen

Ändern von Inline-Stilen mit der style-Eigenschaft

index.html

index.css

index.js

Hinzufügen und Entfernen von CSS-Klassen mit classList

index.html

index.css

index.js

Praxisbeispiel: Wechseln von Themes

Ein praktisches Beispiel, bei dem der Benutzer mit classList zwischen einem hellen und einem dunklen Theme wechseln kann.

index.html

index.css

index.js

classList.replace() wird verwendet, um die Klassen light-theme und dark-theme je nach aktuellem Zustand auszutauschen.

1. Welche Eigenschaft wird verwendet, um Inline-Stile eines Elements zu ändern?

2. Wie kann die Hintergrundfarbe eines `<div>` mit der ID `box` per JavaScript auf coral gesetzt werden?

3. Was bewirkt der folgende Code?

Welche Eigenschaft wird verwendet, um Inline-Stile eines Elements zu ändern?

Select the correct answer

style

classList

getComputedStyle()

Wie kann die Hintergrundfarbe eines <div> mit der ID box per JavaScript auf coral gesetzt werden?

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');

Was bewirkt der folgende Code?

Select the correct answer

Fügt die Klasse active hinzu, falls sie nicht vorhanden ist; entfernt sie, falls sie vorhanden ist.

Setzt die Klasse active als Inline-Stil auf den Button.

Fügt die Klasse active nur hinzu, ohne sie zu entfernen.

Ändert die Hintergrundfarbe zu active.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 12

Ändern von Elementstilen mit JavaScript

Ändern von Inline-Stilen mit der style-Eigenschaft

Hinzufügen und Entfernen von CSS-Klassen mit classList

Praxisbeispiel: Wechseln von Themes

1. Welche Eigenschaft wird verwendet, um Inline-Stile eines Elements zu ändern?

2. Wie kann die Hintergrundfarbe eines <div> mit der ID box per JavaScript auf coral gesetzt werden?

3. Was bewirkt der folgende Code?

Awesome!

Ändern von Elementstilen mit JavaScript

Ändern von Inline-Stilen mit der style-Eigenschaft

Hinzufügen und Entfernen von CSS-Klassen mit classList

Praxisbeispiel: Wechseln von Themes

1. Welche Eigenschaft wird verwendet, um Inline-Stile eines Elements zu ändern?

2. Wie kann die Hintergrundfarbe eines <div> mit der ID box per JavaScript auf coral gesetzt werden?

3. Was bewirkt der folgende Code?

2. Wie kann die Hintergrundfarbe eines `<div>` mit der ID `box` per JavaScript auf coral gesetzt werden?

2. Wie kann die Hintergrundfarbe eines `<div>` mit der ID `box` per JavaScript auf coral gesetzt werden?