How to Change CSS Styles with JavaScript

Published on: by Dr. Talib

One of the most powerful features of JavaScript is its ability to dynamically modify the appearance of a webpage in response to user actions. This is essential for creating things like interactive menus, validation feedback on forms, and theme switchers. There are two main methods to achieve this, each with its own strengths and best use cases.

Method 1: Direct Manipulation of Inline Styles (The `.style` Property)

How it works: Every DOM element has a .style property. This property is an object that contains all possible CSS properties. You can directly set a value for any of these properties, which adds an "inline style" directly to the HTML element.

The Syntax: The syntax is slightly different from CSS. CSS properties with a hyphen (e.g., background-color) are converted to camelCase in JavaScript (e.g., backgroundColor).

Example: Changing the color and font size of a heading

<h2 id="my-heading">I'm a heading!</h2>
<button id="style-btn">Change Style</button>

<script>
  const heading = document.querySelector('#my-heading');
  const styleButton = document.querySelector('#style-btn');

  styleButton.addEventListener('click', () => {
    // This adds style="color: red; font-size: 30px;" to the h2 tag
    heading.style.color = 'red';
    heading.style.fontSize = '30px';
    heading.style.textTransform = 'uppercase';
  });
</script>

When to use this method: Direct style manipulation is best for small, one-off changes or for setting dynamic values that are calculated in JavaScript (e.g., setting an element's position based on the mouse coordinates).

The Downside: Overusing this method can lead to messy code. Your styling logic becomes mixed in with your JavaScript, making it harder to manage than a separate CSS file.

Method 2: Toggling CSS Classes (The Best Practice)

How it works: This is the most common and maintainable approach. Instead of writing CSS in your JavaScript, you pre-define your styles in a CSS class. Then, you use JavaScript to simply add or remove that class from the element when an event occurs.

The Tool: The .classList property is your best friend here. It has simple methods like .add(), .remove(), and the very useful .toggle().

Example: Toggling an 'active' state on a modal window

<style>
  .modal {
    display: none; /* The modal is hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2rem;
    background-color: white;
    border: 1px solid #ccc;
  }
  
  /* The .is-active class makes the modal visible */
  .modal.is-active {
    display: block;
  }
</style>

<div id="my-modal" class="modal">This is the modal window!</div>
<button id="toggle-btn">Toggle Modal</button>

<script>
  const modal = document.querySelector('#my-modal');
  const toggleButton = document.querySelector('#toggle-btn');

  toggleButton.addEventListener('click', () => {
    // The .toggle() method adds the class if it's not there,
    // and removes it if it is. It's perfect for on/off states.
    modal.classList.toggle('is-active');
  });
</script>

Try it Yourself: Paste this into the HTML Viewer and click the button. The JavaScript does not contain any CSS. It only manages which class is present on the element, keeping your styles and logic cleanly separated.

Conclusion: Separate Your Concerns

For building robust, scalable, and easy-to-debug web applications, the class-based approach is almost always superior. It allows your CSS to remain the single source of truth for styling, while your JavaScript focuses on what it does best: managing state and logic.

Reserve the direct .style property for situations where the styles are truly dynamic and cannot be defined in a CSS class ahead of time.