Get an Element's CSS Display Value using JavaScript

# Get an Element's CSS Display Value using JavaScript

To get an element's CSS display value:

Select the element.
Pass the element as a parameter to the window.getComputedStyle() method.
Access the display property on the result.

Here is the HTML for the examples.

index.html

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

  <body>
    <button id="btn" style="display: block">Button</button>

    <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 btn = document.getElementById('btn');

const display = window.getComputedStyle(btn).display;

console.log(display); // 👉️ "block"

get css display value

The code for this article is available on GitHub

The window.getComputedStyle() method returns an object that contains the values of all CSS properties of an element, after applying stylesheets.

The returned object is a live CSSStyleDeclaration object. This means that if the CSS properties of the element get updated, the object will reflect the changes automatically.

index.js

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

const btnStyles = window.getComputedStyle(btn);

console.log(btnStyles.display); // 👉️ "block"

btn.style.display = 'inline-block';

console.log(btnStyles.display); // 👉️ "inline-block"

The example shows how updating the display property of the button element changes the value of the property in the object the getComputedStyle method returns.

# style.display vs window.getComputedStyle

You might have seen examples that use the style.display property to access the element's display value.

index.js

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

const display = btn.style.display;

console.log(display); // 👉️ "block"

style display vs window getcomputedstyle

The code for this article is available on GitHub

However, there are a couple of differences between using style.display and accessing the display property on the object the getComputedStyle method returns:

getComputedStyle returns a read-only object, whereas element.style returns an object that can be used to set styles on the element.
getComputedStyle takes external stylesheets into consideration, whereas element.style does not.
getComputedStyle takes inherited CSS properties into consideration, whereas element.style does not.

That being said, if you aren't setting the element's display property from an external stylesheet and the element doesn't inherit the property from a parent, you can use the style.display property to read the value.

Note that you should always use the element.style object to set and update CSS properties on an element.

# 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.

Get an Element's CSS Display Value using JavaScript