Skip to main content

How to Remove All Styles from an Element in JavaScript

When you need to programmatically reset the appearance of a DOM element, you might need to remove styles that have been applied to it. These styles can come from two primary sources: inline styles (set via the style attribute) and CSS classes (set via the class attribute). Removing them requires different techniques.

This guide will teach you the modern, standard methods for removing all inline styles from an element, removing a single inline style property, and removing all CSS classes.

The Core Problem: Inline Styles vs. Stylesheet Rules​

It's crucial to understand the two main ways an element gets its style:

  1. Inline Styles: Applied directly to the element via the style attribute. These are the highest priority styles. 
    <div id="box" style="color: red; font-size: 20px;">Hello</div>
  2. Stylesheet/Class Rules: Applied via CSS classes or other selectors in a <style> tag or an external .css file. 
    <div id="box" class="my-class">Hello</div>
    .my-class { color: blue; }

The methods described below for removing "styles" primarily affect the inline style attribute. They will not remove styles that are being applied by a CSS class.

Removing All Inline Styles (The style attribute)​

The most direct and effective way to remove all inline styles from an element is to remove the style attribute itself.

Problem: you have an element with multiple inline styles that you want to completely clear.

<!-- Problem: Remove the color and font-size from this element. -->
<div id="box" style="color: red; font-size: 20px;">Hello</div>

Solution: use the element.removeAttribute() method.

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

// This completely removes the 'style' attribute from the element.
box.removeAttribute('style');

After this code runs, the element in the DOM will be:

<div id="box">Hello</div>

All inline styles are gone, and the element will revert to the styles provided by its CSS classes or browser defaults.

note

This is the recommended best practice for clearing all inline styles.

Removing a Single Inline Style Property​

If you don't want to remove all inline styles, but just a specific one, you can do so by setting that property on the element's style object to null or an empty string ('').

Problem: you want to remove the font-size but keep the color.

<div id="box" style="color: red; font-size: 20px;">Hello</div>

Solution:

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

// Set the specific property to null or an empty string to remove it.
box.style.fontSize = null;

// The style attribute is updated in the DOM.
console.log(box.getAttribute('style')); // Output: "color: red;"
note

CSS properties with hyphens (like font-size) are converted to camelCase (like fontSize) when accessed as properties on the style object.

If the styles you want to remove are coming from CSS classes, you need to remove those classes.

Problem: you want to remove all classes from an element to strip it of its class-based styling.

<div id="box" class="active featured text-large">Hello</div>

Solution: the simplest and most direct way to remove all classes is to set the className property to an empty string.

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

// This replaces the entire class list with nothing.
box.className = '';

After this code runs, the element will be:

<div id="box">Hello</div>

You could also use box.removeAttribute('class'), which has the same effect. The className = '' approach is often preferred for its clarity.

Conclusion​

Removing styles from an element is a straightforward task, as long as you target the correct source of the style.

  • To remove all inline styles from an element, the recommended best practice is element.removeAttribute('style').
  • To remove a single inline style property, set its corresponding property on the style object to null or an empty string (e.g., element.style.color = null).
  • To remove all CSS classes from an element, the simplest method is to set element.className = ''.

Table of Contents