Changing DOM Styles

In the previous lesson, we learned how to change the text and HTML inside an element. Now let’s change how an element looks, by updating its styles from JavaScript.

🎨 The style Property

Every element has a style property that lets you set inline CSS directly. You read or write each CSS rule as a property on style.

The example below selects a heading and turns its text red.

const title = document.querySelector("#title");

title.style.color = "red";

Let’s walk through what each line does:

• The first line selects the element with id="title" and stores it in title.
• The second line sets that element’s inline color to red, exactly as if you had written style="color: red" in the HTML.

The important detail is the name. In CSS you write background-color, but in JavaScript you write backgroundColor. Property names that contain a hyphen become camelCase, with the hyphen removed and the next letter capitalized.

Here is a small example that sets a few styles at once.

const box = document.querySelector("#box");

box.style.backgroundColor = "lightblue";
box.style.fontSize = "20px";
box.style.padding = "10px";

Let’s read this one line by line:

• The first line grabs the element with id="box" and saves it in box.
• The next line sets its background-color to lightblue using the camelCase name backgroundColor.
• The line after that sets its font-size to 20px through fontSize.
• The last line sets padding to 10px. Each value is a string, just like you would write it in CSS.

🧱 The classList Property

Setting one style at a time works, but it spreads styling across your JavaScript. The cleaner approach is to keep the look in a CSS class and switch that class on and off from JavaScript. The classList property gives you methods to do exactly that.

First you define the look in CSS:

.dark {
  background-color: black;
  color: white;
}

This CSS rule bundles two style rules under one name:

• The .dark selector targets any element that has the dark class.
• Inside it, background-color: black and color: white set a dark background with light text. Any element you give this class gets both rules at once.

Then you switch that class with JavaScript:

const page = document.querySelector("#page");

page.classList.add("dark"); // turns the look on
page.classList.remove("dark"); // turns the look off
console.log(page.classList.contains("dark")); // false

Let’s follow each line:

• The first line selects the element with id="page" and stores it in page.
• classList.add("dark") puts the dark class on the element, so the CSS rule above takes effect.
• classList.remove("dark") takes that class back off, undoing the look.
• classList.contains("dark") checks whether the class is still there. Since we just removed it, this logs false.

🌗 Why classList Is Better

Toggling a class keeps all your styling in the CSS file, where it belongs. Your JavaScript only decides when a look applies, not what that look is. This means you can change the design later by editing CSS, without touching your code, and one class can carry many style rules at once.

🌓 Practical Example: A Dark Mode Toggle

The toggle method shines when you want a button that switches a look on and off. Each click flips the dark class on the page.

const button = document.querySelector("#themeButton");
const page = document.querySelector("#page");

button.addEventListener("click", () => {
  page.classList.toggle("dark"); // ✅ on, off, on, off...
});

Let’s break down what happens here:

• The first two lines grab the button and the page element and store each in its own variable.
• button.addEventListener("click", ...) runs the function inside it every time the button is clicked.
• On each click, page.classList.toggle("dark") adds the dark class if it is missing and removes it if it is present.

The browser adds the dark class on the first click and removes it on the next. You never have to track the current state yourself.

⚠️ Common Mistakes to Avoid

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ element.style.property sets inline CSS, using camelCase names like backgroundColor
• ✅ classList adds, removes, toggles, and checks CSS classes
• ✅ toggle flips a class on and off without tracking state
• ✅ Switching classes keeps your styling in CSS where it is easy to change
• ✅ Avoid overwriting className and avoid scattering styles inline

🚀 What’s Next?

Now that you can restyle elements, we will learn how to build brand-new ones from scratch. Let’s continue to Creating Elements.