JavaScript Simplified · One concept, one day, one project · Day 15 of 32

Changing Styles

Using JavaScript to change how things look: one style at a time, or a whole look with a class. You apply a dark theme to a page from code.

By the end of today you can

Change one style directly with element.style
Add, remove and toggle a class with classList
Explain why classes are usually better than setting styles one by one
Apply a theme with JavaScript

You can change what a page says. Now you change how it looks. There are two ways: nudge a single style, or switch a whole class on and off. This is also a good day to remember that the real styling still lives in your CSS.

1. element.style: one style at a time

element.style changes a single CSS property directly. A CSS name with a dash, like background-color, becomes backgroundColor in JavaScript (camelCase).

What this code doesJavaScript sets the colour and background of a box.

index.html

<div id="box">Styled from JavaScript</div>

style.css

#box{padding:20px;font-weight:bold;text-align:center}

app.js

const box = document.getElementById("box");
box.style.backgroundColor = "#0a6e6e";
box.style.color = "white";
box.style.borderRadius = "10px";

BROWSERindex.html  ·  after the script runs

Each line sets one property. Good for a quick change, but setting ten styles this way gets messy. That is what classes are for.

2. classList: a whole look at once

A better way is to put the look in a CSS class, then add or remove that class with classList. One line changes many styles at once, and your CSS stays in charge.

element.classList.add("dark") adds the class.
element.classList.remove("dark") removes it.
element.classList.toggle("dark") adds it if missing, removes it if present.

What this code doesAdding a "dark" class flips the whole look, because the look lives in CSS.

index.html

<div id="panel">Hello</div>

style.css

1
2

#panel{padding:24px;text-align:center;font-size:18px;background:#f4f4f4;color:#111}
.dark{background:#0a2540 !important;color:#e8f4f4 !important}

app.js

1
2

// one line swaps the entire look
document.getElementById("panel").classList.add("dark");

BROWSERindex.html  ·  after adding the dark class

Why classes beat setting styles one by one

The CSS class holds the whole look in one place. JavaScript just decides when to apply it. That keeps styling in the CSS (where it belongs) and keeps your JavaScript short.

Today’s Mini Project

🎨 Theme Switcher

Apply a dark theme to a small page with a single class. Today JavaScript applies it on load; on Day 18, once you know events, you will flip it with a button click.

What this code doesThe whole card switches to the dark theme from one line of JavaScript.

index.html

<div class="app" id="app">
  <h2>Webbo3</h2>
  <p>One concept, one day, one project.</p>
</div>

style.css

1
2

.app{padding:24px;border-radius:12px;background:#ffffff;color:#111;max-width:320px;border:1px solid #ddd}
.app.dark{background:#0a2540;color:#e8f4f4;border-color:#0a2540}

app.js

1
2
3

const app = document.getElementById("app");
// turn the dark theme on
app.classList.add("dark");

BROWSERindex.html  ·  after the dark theme is applied

Challenge (15 minutes)

Change the script to classList.toggle("dark") and call it twice in a row. What do you expect the final state to be, and why? (Toggling twice returns to the start.)

Try This

Give an element a class "highlight" in CSS (a yellow background), then add it from JavaScript.

Expected: the element turns yellow when the class is added.

Picture This

Content and look are both yours to change now. A theme switch, a "selected" highlight, an error state turning a field red: all of them are a class being added or removed. The CSS holds the look; JavaScript decides when.

Checkpoint

How do you write background-color in element.style?

As backgroundColor. CSS names with dashes become camelCase in JavaScript, so background-color becomes backgroundColor.

Why is classList usually better than setting many styles one by one?

Because the whole look lives in one CSS class. JavaScript just adds or removes it, keeping styling in the CSS and the JavaScript short.

What does classList.toggle do?

It adds the class if the element does not have it, and removes it if it does. Perfect for on/off looks like a theme switch.

Tick Before You Move On

☐ I can change one style with element.style
☐ I can add, remove and toggle a class with classList
☐ I can explain why classes are better than many inline styles
☐ I applied a theme with JavaScript

Quick Recap

element.style changes one CSS property at a time (in camelCase). classList add, remove and toggle switch whole looks defined in CSS. Classes keep styling in the CSS and JavaScript short. A theme, a highlight, an error state are all a class being toggled.

Next: Day 16. So far you have changed elements that already existed. Tomorrow you create brand new elements and add them to the page.

Changing Styles

1. element.style: one style at a time

2. classList: a whole look at once

Today’s Mini Project

Checkpoint

Learn this with a real instructor