Remove CSS Style Property from an Element using JavaScript

# Remove CSS Style Property from an Element

Use the style.removeProperty() method to remove CSS style properties from an element.

The removeProperty() method removes the provided CSS style property from the element.

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div
      id="box"
      style="background-color: yellow; color: red; width: 100px; height: 100px"
    >
      Box 1
    </div>

    <script src="index.js"></script>
  </body>
</html>

And here is the related JavaScript code.

index.js

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

// ✅ Remove CSS properties
box.style.removeProperty('width');
box.style.removeProperty('height');
box.style.removeProperty('background-color');

// ✅ Set CSS Properties
// box.style.setProperty('background-color', 'salmon');

We used the style.removeProperty method to remove CSS properties from the element.

Note that multi-word property names are hyphenated and not camel-cased.

# Adding a CSS style property to an element

If you need to add a CSS style property to the element, use the style.setProperty method.

index.js

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

// ✅ Set CSS Properties
box.style.setProperty('background-color', 'salmon');

The style.setProperty method sets or updates a CSS style property on the DOM element.

Alternatively, you can use a more direct approach.

# Remove a CSS style property from an element by setting it to `null`

You can also remove CSS style properties from an element by setting the property to a null value, e.g. box.style.backgroundColor = null;.

When an element's CSS property is set to null, the property is removed from the element.

index.js

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

// ✅ Remove CSS properties
box.style.backgroundColor = null;
box.style.width = null;

// ✅ Set CSS Properties
// box.style.backgroundColor = 'coral';

We can access CSS properties on the element's style object.

Notice that instead of hyphenating property names, we use camel-cased names when using this approach, e.g. backgroundColor instead of background-color.

The style object allows us to read, set, and update the values of CSS properties on the element.

If you want to set a CSS property on the element, set the property to a value other than null.

index.js

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

// ✅ Set CSS Properties
box.style.backgroundColor = 'coral';

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Remove CSS Style Property from an Element using JavaScript