Check if Element's Style contains CSS property using JS

# Check if Element's Style contains CSS property using JS

To check if an element's style contains a specific CSS property, use the style object on the element to access the property and check if its value is set.

If the element's style does not contain the property, an empty string is returned.

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: salmon;
        width: 150px;
        height: 150px;
      "
    >
      Hello world
    </div>

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

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

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

// ✅ Check if CSS property is contained in Style
if (box.style.backgroundColor) {
  console.log('value is', box.style.backgroundColor);
} else {
  console.log('CSS property is not contained in style');
}

// -----------------------------------------

// ✅ Remove property from style
box.style.removeProperty('background-color');

// -----------------------------------------

// ✅ Add property to style
box.style.setProperty('background-color', 'lime');

check if element style contains css property

The code for this article is available on GitHub

To check if an element's style contains a CSS property, we directly access the property on the style object.

index.js

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

// ✅ Check if CSS property is contained in Style
if (box.style.backgroundColor) {
  console.log('value is', box.style.backgroundColor);
} else {
  console.log('CSS property is not contained in style');
}

If the value of the property is not set, an empty string is returned.

Notice that CSS property names that consist of multiple words are camel-cased, e.g. backgroundColor.

The if block will run only if the background color property is set as an inline style on the element.

Otherwise, the else block is run.

# Removing a CSS property from the element's inline styles

If you need to remove a CSS property from the element's inline styles, call the removeProperty method on the style object.

index.js

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

// ✅ Remove property from style
box.style.removeProperty('background-color');

remove css property from element inline styles

The code for this article is available on GitHub

The method removes the given property from the CSS style declaration object of the element.

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

# Set or update a CSS property on the element's inline styles

Similarly, you can set or update a CSS property on the element's inline styles by using the setProperty() method.

index.js

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

// ✅ Add property to style
box.style.setProperty('background-color', 'lime');

set or update css property on element inline styles

The code for this article is available on GitHub

The setProperty method sets a new value for the property on the element's CSS style declaration object.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

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.

Check if Element's Style contains CSS property using JS