Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Utmaning: Tillämpa Dynamiska Stilar på DOM-Element | DOM-manipulation för Interaktiv Webbapplikationsutveckling
Avancerad JavaScript-mästerskap

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

  1. Ändra inbyggda stilar: När knappen klickas:
    • Ändra bakgrundsfärgen på <div> med ID card till "lightblue";
    • Sätt bredden på kortet till "300px";
    • Lägg till en 2px solid #333 ram runt kortet.
  2. Växla en Highlight-klass: När knappen klickas:
    • Lägg till eller ta bort klassen highlight<div> med ID card.
  3. Lägg till en Dark Theme-klass: När knappen klickas:
    • Lägg till eller ta bort klassen dark-theme<body>, vilket ska byta sidans tema.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Använd style.backgroundColor för att ändra bakgrundsfärgen på <div> med ID card 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 en 2px solid #333 ram runt kortet;
  • Använd classList.toggle() för att lägga till eller ta bort klassen highlight<div> med ID card;
  • Använd classList.toggle() för att lägga till eller ta bort klassen dark-theme<body>, vilket ska byta sidans tema.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 13

Fråga AI

expand

Fråga AI

ChatGPT

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

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

  1. Ändra inbyggda stilar: När knappen klickas:
    • Ändra bakgrundsfärgen på <div> med ID card till "lightblue";
    • Sätt bredden på kortet till "300px";
    • Lägg till en 2px solid #333 ram runt kortet.
  2. Växla en Highlight-klass: När knappen klickas:
    • Lägg till eller ta bort klassen highlight<div> med ID card.
  3. Lägg till en Dark Theme-klass: När knappen klickas:
    • Lägg till eller ta bort klassen dark-theme<body>, vilket ska byta sidans tema.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Använd style.backgroundColor för att ändra bakgrundsfärgen på <div> med ID card 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 en 2px solid #333 ram runt kortet;
  • Använd classList.toggle() för att lägga till eller ta bort klassen highlight<div> med ID card;
  • Använd classList.toggle() för att lägga till eller ta bort klassen dark-theme<body>, vilket ska byta sidans tema.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 13
some-alt