Skip to main content

How to Remove a CSS Style from an Element in JavaScript

When you dynamically manipulate the styles of a DOM element using JavaScript, you often set inline styles (e.g., element.style.color = 'red'). A common follow-up task is to remove that inline style, allowing the element to revert to the styles defined in your CSS stylesheets.

This guide will teach you the two primary methods for removing an inline style property. We will cover the explicit and recommended style.removeProperty() method, as well as the alternative of setting the style property to null.

The Core Problem: Overriding CSS with Inline Styles​

When you set a style property directly on an element in JavaScript, it adds an inline style attribute to the HTML. Inline styles have a very high specificity and will override styles from your external or internal stylesheets.

Examaple of problem:

HTML code
<div id="box" style="color: blue;">Hello World</div>
CSS code
#box {
  color: red; /* This rule is overridden by the inline style */
}

To make the text red again, we need to remove the inline color: blue; style.

The HTMLElement.style.removeProperty() method is the standard, explicit, and most readable way to remove a single CSS property from an element's inline styles.

The logic: call .removeProperty() on the element's style object, passing the name of the CSS property you want to remove. The property name should be in kebab-case (hyphenated), just like in a CSS file.

The Solution:

const box = document.getElementById('box');

// The property name 'background-color' is in kebab-case.
box.style.removeProperty('background-color');
box.style.removeProperty('color');
note

After this code runs, the background-color and color properties will be removed from the element's style attribute. The element will then fall back to whatever styles are defined for it in your stylesheets.

Method 2 (Alternative): Setting the Style Property to null​

An alternative way to remove a style is to access it via its camelCase property on the style object and set its value to null or an empty string ('').

The logic: when accessing style properties directly in JavaScript, CSS properties are converted to camelCase. For example, background-color becomes backgroundColor.

The solution:

const box = document.getElementById('box');

// The property name 'backgroundColor' is in camelCase.
box.style.backgroundColor = null;
box.style.color = null; // or box.style.color = '';

While this works, removeProperty() is often preferred because:

  • It's more explicit about your intent to remove rather than set.
  • It uses the standard CSS property names (kebab-case), which can be less confusing.

Practical Example: A "Reset Styles" Button​

This script demonstrates a button that removes all inline styles from an element, effectively resetting it to its default stylesheet appearance.

HTML:

<div id="my-element" style="background-color: yellow; color: red; font-size: 24px;">
  Styled Element
</div>
<button id="reset-btn">Reset Styles</button>

JavaScript:

const myElement = document.getElementById('my-element');
const resetButton = document.getElementById('reset-btn');

resetButton.addEventListener('click', () => {
  // To remove ALL inline styles, you can remove the entire 'style' attribute.
  myElement.removeAttribute('style');
  
  console.log('Styles have been reset!');
});
note

This is the most efficient way to clear all inline styles at once. If you only wanted to remove specific styles, you would use .removeProperty() multiple times.

Conclusion​

Removing inline CSS properties is a simple task with two effective methods.

  • The recommended best practice is to use element.style.removeProperty('property-name'). This method is explicit, and it uses standard CSS kebab-case property names.
  • An alternative is to set the camelCase version of the property to null or an empty string: element.style.propertyName = null;.
  • To remove all inline styles from an element at once, the most direct method is element.removeAttribute('style').

Table of Contents