Skip to main content

How to Get the Computed CSS Display Value of an Element in JavaScript

A common task in DOM manipulation is to read the current CSS display value of an element to make a decision in your code—for example, to check if an element is currently hidden (display: 'none'). While it might seem intuitive to use element.style.display, this is often incorrect and leads to bugs. The standard and most reliable way to get the actual, rendered style of an element is with the window.getComputedStyle() method.

This guide will explain the critical difference between element.style and getComputedStyle(), show you the correct way to read the display property, and provide a practical example of how to toggle an element's visibility.

The Core Problem: element.style vs. getComputedStyle()​

It is essential to understand that these two APIs serve different purposes:

APIPurposeReads From
element.styleSetting an element's inline styles.Only the HTML style="..." attribute.
getComputedStyle()Reading the final, calculated CSS values of an element.All sources (inline, internal, external stylesheets, browser defaults).

The getComputedStyle() method gives you the "truth" of what is actually being rendered on the page after all stylesheets have been applied.

The window.getComputedStyle() method takes an element as an argument and returns a live CSSStyleDeclaration object that contains the values of all CSS properties for that element.

For example, you have an element styled by a CSS rule in a stylesheet, and you need to get its display value.

HTML & CSS:

<style>
  #my-box {
    display: block;
    width: 100px;
    height: 100px;
  }
</style>
<div id="my-box"></div>

Solution:

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

// Get the computed style object for the element
const styles = window.getComputedStyle(box);

// Access the 'display' property
const displayValue = styles.display;

console.log(displayValue); // Output: "block"

This correctly reads the value from the stylesheet.

The Common Pitfall: Why element.style Fails for Reading Styles​

The element.style property only reflects the CSS rules that are set directly in the element's style attribute. It does not know anything about styles applied from a <style> tag or an external CSS file.

Using the same HTML and CSS from the previous example we have some problems:

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

// This will be an empty string because there is no inline style attribute.
const displayValue = box.style.display;

console.log(displayValue); // Output: "" (an empty string)

This is a very common source of bugs. The script gets an empty string and incorrectly assumes the display property is not set, even though the element is clearly visible as a block on the page.

Practical Example: Toggling an Element's Visibility​

This script demonstrates the correct usage of both APIs. It uses getComputedStyle() to read the current display state and then uses element.style to set the new state.

<button id="toggle-btn">Toggle Box</button>
<div id="content-box">This is the content.</div>
const toggleButton = document.getElementById('toggle-btn');
const contentBox = document.getElementById('content-box');

toggleButton.addEventListener('click', () => {
  // 1. READ the current, computed style
  const computedStyle = window.getComputedStyle(contentBox);
  
  if (computedStyle.display === 'none') {
    // 2. SET the new style using the .style property
    contentBox.style.display = 'block';
    console.log('Box is now visible.');
  } else {
    // 2. SET the new style
    contentBox.style.display = 'none';
    console.log('Box is now hidden.');
  }
});

Conclusion​

For reading and writing CSS properties in JavaScript, it's crucial to use the right tool for the job.

  • To READ the final, rendered value of any CSS property on an element, always use window.getComputedStyle(element).
  • To SET an inline style on an element, use the element.style property.

By remembering this simple distinction, you can reliably read and manipulate the styles of any element on your page and avoid common bugs related to empty style properties.

Table of Contents