Modifying Element Styles

JavaScript can change how an element looks in two ways. It can set the element’s inline styles, or it can add and remove CSS classes. Both work, but most of the time you want to change classes, because that keeps the styling rules in the CSS file.

The style Property

Every element has a style property for reading and setting inline styles:

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

// Set inline styles
box.style.backgroundColor = "blue";
box.style.width = "200px";
box.style.padding = "20px";
box.style.border = "1px solid black";

CSS property names are converted to camelCase in JavaScript:

  • background-color becomes backgroundColor
  • font-size becomes fontSize
  • border-radius becomes borderRadius
  • z-index becomes zIndex

Values must be strings, including units for numeric values:

// Correct
element.style.width = "100px";
element.style.opacity = "0.5";

// Incorrect - won't work
element.style.width = 100;  // Number without unit

To remove an inline style, set it to an empty string:

box.style.backgroundColor = "";  // Removes inline background-color

The classList Property

The classList property provides methods to add, remove, and toggle CSS classes:

const button = document.querySelector(".btn");

// Add classes
button.classList.add("active");
button.classList.add("primary", "large"); // Multiple classes

// Remove classes
button.classList.remove("active");
button.classList.remove("primary", "large");

// Toggle a class (add if missing, remove if present)
button.classList.toggle("active");

// Toggle with condition
button.classList.toggle("visible", isLoggedIn); // Add if true, remove if false

// Check if class exists
if (button.classList.contains("active")) {
  console.log("Button is active");
}

// Replace one class with another
button.classList.replace("old-class", "new-class");

You can also iterate over classes:

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

// Iterate with forEach
box.classList.forEach((className) => {
  console.log(className);
});

// Convert to array
const classes = [...box.classList];
console.log(classes); // ["box", "active", "highlighted"]

className vs classList

The older className property gives direct access to the class attribute as a string:

const div = document.querySelector("div");

// Read all classes as a string
console.log(div.className); // "box active highlighted"

// Set classes (replaces all existing classes)
div.className = "box new-class";

classList is preferred because it lets you add or remove individual classes without affecting others. With className, you have to manipulate the string yourself:

// With className (verbose and error-prone)
div.className = div.className + " active";
div.className = div.className.replace(" active", "");

// With classList (clean and safe)
div.classList.add("active");
div.classList.remove("active");

Classes vs Inline Styles

In most cases, manipulating classes is better than setting inline styles:

// Prefer: Define styles in CSS, toggle class with JavaScript
// CSS: .hidden { display: none; }
element.classList.add("hidden");

// Avoid: Inline styles mixed with JavaScript
element.style.display = "none";

Benefits of class manipulation:

  • Keeps styles in CSS where they belong
  • Makes styles reusable and consistent
  • Easier to maintain and update
  • Better performance for complex style changes
  • Respects CSS specificity and cascade

Use inline styles for:

  • Dynamic values calculated at runtime (positions, animations)
  • Quick prototyping
  • Values that are different for every element
// Good use of inline styles - dynamic values
elements.forEach((el, index) => {
  el.style.left = `${index * 100}px`;
});

// Good use of classes - static state changes
button.addEventListener("click", () => {
  menu.classList.toggle("open");
});