Changing CSS Styles with JavaScript DOM Methods

To change CSS styles with JavaScript, you have three tools: the style property for inline CSS, classList for class-based styling, and setProperty for custom properties and dynamic names. Each has a different use case, and knowing when to use which keeps your code clean and your styles maintainable.

Here is a quick overview of all three approaches:

javascript

const box = document.querySelector("#box");
 
box.style.backgroundColor = "blue";
box.classList.add("highlighted");
box.style.setProperty("--box-size", "200px");

The first line sets an inline style directly, the second toggles a CSS class defined in a stylesheet, and the third sets a custom property. Each approach changes the element's appearance, but the mechanism and the best use case differ. The rest of this article explains when to use each one.

The style Property: Direct Inline CSS

The style property reads and writes inline styles directly on the element. CSS property names switch from hyphen-case to camelCase because hyphens are not valid in JavaScript identifiers.

Here is a practical example that changes multiple properties at once:

javascript

const card = document.querySelector(".card");
 
card.style.backgroundColor = "#f5f5f5";
card.style.padding = "16px";
card.style.borderRadius = "8px";
card.style.border = "1px solid #ddd";

Each assignment adds or updates an inline style on the element. The changes are visible immediately. The resulting HTML looks like the element has a style attribute with all these properties.

The style property only reads inline styles. It cannot read styles from your CSS stylesheet. If you need to know the actual rendered style of an element, use getComputedStyle instead:

javascript

const element = document.querySelector("h1");
const computedColor = getComputedStyle(element).color;
console.log(computedColor);

This returns the color the browser is actually rendering, whether it came from a stylesheet, an inline style, or the browser default.

classList: The Preferred Approach

classList lets you add, remove, toggle, and check CSS classes without touching the style property at all. This keeps styling logic in your CSS files where it belongs.

javascript

const panel = document.querySelector("#panel");
 
panel.classList.add("open");      // Add a class
panel.classList.remove("closed"); // Remove a class
panel.classList.toggle("dark");   // Add if absent, remove if present
panel.classList.contains("open"); // Check if a class exists (returns true/false)

The classList approach separates concerns: CSS files handle how things look, JavaScript handles when those looks change. Your stylesheet might define:

css

.panel.open {
  display: block;
  opacity: 1;
}
 
.panel.closed {
  display: none;
  opacity: 0;
}

And your JavaScript simply adds or removes the class to trigger those styles. This is more maintainable than setting individual style properties in JavaScript because the visual rules stay in one place.

setProperty: Custom Properties and Dynamic Names

setProperty is useful in two specific situations. First, when working with CSS custom properties (variables):

javascript

const root = document.documentElement;
 
root.style.setProperty("--primary-color", "#ff4500");
root.style.setProperty("--spacing-unit", "12px");

Any element that uses var(--primary-color) in your stylesheet will update immediately. This is how you implement theme switching and dynamic color schemes.

Second, when the property name is not known until runtime:

javascript

const element = document.querySelector("#target");
const propertyName = "background-color";
 
element.style.setProperty(propertyName, "yellow");

If the property name comes from a variable or user configuration, setProperty handles the hyphenated CSS name directly without needing to convert to camelCase.

Which Approach to Use

Use the style property for quick tests in the browser console or for one-off dynamic values where a CSS class would be overkill, like setting an element's position based on mouse coordinates in a drag interaction.

Use classList for almost everything else. It keeps your CSS and JavaScript separate: you define the visual states in your stylesheet and toggle between them with classList.add, classList.remove, and classList.toggle.

This is the approach used by every major UI library because it is easier to debug and maintain.

Use setProperty when you need CSS custom properties or when the property name itself is dynamic.

For a deeper look at classList specifically, see how to use classList toggle. For the broader topic of building interactive UI, see handling click events in JavaScript.