How to manipulate CSS with JavaScript

JavaScript

The short answer

There are three main ways to change CSS with JavaScript: inline styles using element.style, the classList API for adding and removing CSS classes, and getComputedStyle for reading the final styles applied to an element.

Inline styles

You can set styles directly on an element using the style property:

const box = document.querySelector('.box');
box.style.backgroundColor = 'blue';
box.style.width = '200px';
box.style.padding = '16px';
box.style.display = 'flex';

CSS property names are camelCase in JavaScript: background-color becomes backgroundColor, font-size becomes fontSize.

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

box.style.backgroundColor = ''; // removes the inline style

classList — the preferred approach

Instead of setting styles directly, it is usually better to toggle CSS classes:

const button = document.querySelector('.btn');
// Add a class
button.classList.add('active');
// Remove a class
button.classList.remove('active');
// Toggle — adds if missing, removes if present
button.classList.toggle('active');
// Check if a class exists
button.classList.contains('active'); // true or false
// Add multiple classes
button.classList.add('large', 'primary');

This is better than inline styles because:

  • Styles stay in CSS where they belong
  • You can apply multiple styles at once with one class
  • It is easier to maintain and override
/* Define styles in CSS */
.active {
  background-color: blue;
  color: white;
  border: none;
}
// Toggle all those styles with one line
button.classList.toggle('active');

Reading computed styles

To read the final styles applied to an element (including styles from CSS files, inherited styles, etc.), use getComputedStyle:

const element = document.querySelector('.box');
const styles = getComputedStyle(element);
console.log(styles.backgroundColor); // "rgb(0, 0, 255)"
console.log(styles.fontSize); // "16px"
console.log(styles.display); // "flex"

element.style only shows inline styles. getComputedStyle shows the actual computed values after all CSS rules are applied.

CSS custom properties (variables)

You can read and write CSS custom properties with JavaScript:

// Set a CSS variable
document.documentElement.style.setProperty(
  '--primary-color',
  'blue'
);
// Read a CSS variable
const color = getComputedStyle(
  document.documentElement
).getPropertyValue('--primary-color');

This is useful for theming — change one variable and everything updates.

Interview Tip

The main thing interviewers want to hear is that classList is preferred over inline styles for most cases. Show that you know classList.add, classList.remove, and classList.toggle. Mention getComputedStyle for reading styles. If the interviewer asks about theming, CSS custom properties are the modern answer.

Why interviewers ask this

This tests basic DOM and CSS knowledge. Interviewers want to see if you know the different ways to change styles, when to use each approach, and why classList is usually better than inline styles. It is practical knowledge that comes up in everyday frontend work.

Table of Contents