How to Change CSS with JavaScript

Use JavaScript style updates when the UI needs to react to clicks, form input, API results, or live state changes. The cleanest default is toggling CSS classes, while direct inline styles work well for one-off updates.

What you’ll build or solve

You’ll learn how to change CSS with JavaScript using direct style properties and class toggling. You’ll also know when class-based updates are cleaner than inline styles.

When this approach works best

This approach is the right choice when styles need to change based on user actions or application state.

Common real-world scenarios include:

• Dark mode toggles
• Open and closed menus
• Error states
• Loading indicators
• Dynamic sizing

This is a bad idea when the same visual state appears in many places. In that case, class toggling scales better than repeated inline style changes.

Prerequisites

You only need:

• A basic HTML page
• A JavaScript file or <script> tag
• Basic DOM selection knowledge

Step-by-step instructions

Step 1: Select the element and update its style

For quick one-off changes, use the .style property.

<button class="cta">Start</button>

<script>
  const button = document.querySelector(".cta");
  button.style.backgroundColor = "#0057ff";
</script>

For reusable UI states, toggle a class instead.

<div class="menu hidden">Menu</div>

<style>
  .hidden {
    display: none;
  }
</style>

<script>
  const menu = document.querySelector(".menu");
  menu.classList.remove("hidden");
</script>

What to look for:

• .style is best for quick direct updates
• Use camelCase like backgroundColor
• classList scales better for repeated states
• Great for toggles and UI feedback
• Prefer classes for maintainable design systems

Examples you can copy

Change text color

const heading = document.querySelector("h1");
heading.style.color = "red";

Show hidden banner

const banner = document.querySelector(".banner");
banner.classList.remove("hidden");

Toggle dark mode

document.body.classList.toggle("dark-mode");

Common mistakes and how to fix them

Mistake 1: Using kebab-case in .style

What the reader might do:

button.style.background-color = "blue";

Why it breaks: JavaScript style properties use camelCase.

Corrected approach:

button.style.backgroundColor = "blue";

Mistake 2: Overusing inline styles for reusable states

What the reader might do:

menu.style.display = "none";
menu.style.backgroundColor = "#111";
menu.style.color = "white";

Why it breaks: repeated inline updates become harder to maintain.

Corrected approach:

Use a CSS class and toggle it.

menu.classList.add("dark-menu");

Mistake 3: Trying to change styles before selecting the element

What the reader might do:

button.style.color = "red";

Why it breaks: button is undefined if the element was never selected.

Corrected approach:

const button = document.querySelector(".cta");
button.style.color = "red";

Troubleshooting

If the style does not change, confirm the element selector is correct.

If camelCase properties fail, recheck the exact JavaScript style name.

If repeated UI states feel messy, switch to class toggling.

If the script throws undefined, select the element first.

Quick recap

• Use .style for quick inline updates
• Use camelCase property names
• Use classList for reusable states
• Prefer classes for larger UI systems
• Always select the element first