Get an Element’s CSS Display Value In JavaScript

Get an Element’s CSS Display Value in JavaScript

You will learn how to get an element’s CSS display value in JavaScript using several methods. This is an essential skill when working with element’s CSS in Javascript.

Get an element’s CSS display value in JavaScript

Using window.getComputedStyle()

This function returns an object that contains the values of all CSS properties of the element passed to its parameter:




  • element: The element you want to get CSS display value.

You can use the getComputedStyle(element) to get a list of CSS properties and then access the property you want to get the value. For example:

            p {
                color : red;
                display : inline;
        <p id = "p">Example: </p>
        <button id = "button" style = "font: 1rem sans-serif;display: inline"> LearnShareIT </button>

To get the usage and syntax of the getElementById() function, you can read this page.

let button = document.getElementById("button");
let p = document.getElementById("p");
let buttonCSS = window.getComputedStyle(button);



The logic behind this solution is very simple. Because we want to get the display value in the CSS’s properties, we need to achieve the CSS’s properties of the element first. This is done by using the window.getComputedStyle() method. After you get the object containing the CSS properties, we then access the ‘display’ property through the object to get its display value. If you want to see the return object by the method, then you can log out the buttonCSS variable:

The object returned by the method has a myriad of properties instead of some properties you have declared or expected. That is the reason why we shouldn’t print the object. Instead, we just access the ‘display’ property to get its value. In addition, this method can be called without the ‘window.’ before it:

let button = document.getElementById("button");
let p = document.getElementById("p");



Using the element’s style property

Assume you have an element. You can access its style’s property easily by this syntax:

This property, called the CSSStyleDeclaration interface, returns an object that includes CSS properties of an element.

let button = document.getElementById("button");


To get an element’s CSS display value, all you have to do is accessing the display property in style:

let button = document.getElementById("button");
let p = document.getElementById("p");
console.log(; //print ‘inline’
console.log(; //print nothing

You may be surprised by the result in the above example as you expected the last command to print its property in the CSS, which is display : inline. That is because the returned objects in the two solutions are completely different. In short, the getComputedStyle() method will return an object that also has CSS properties (the properties in the style tag you declared in the head), whereas does not because it only has the properties you declared inside that element tag.


We have learned how to get an element’s CSS display value in JavaScript using two different approaches. With the help of our instructions in this tutorial, you can easily succeed in achieving the goal. Good luck for you!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *