Skip to main content

How to Check an Element's CSS Properties in JavaScript

When working with the DOM, you often need to read an element's CSS properties to understand its current state or to make decisions based on its appearance. A common point of confusion is that there are two primary ways to do this, each serving a different purpose: checking inline styles versus checking computed styles.

This guide will clarify the critical difference between these two concepts. You will learn how to use the element.style property to check and modify inline styles, and how to use the window.getComputedStyle() method to read the final, rendered style of an element, regardless of where it was defined.

The Critical Distinction: Inline vs. Computed Styles​

Before you can check a style, you must understand where it comes from.

  • Inline Styles: These are styles applied directly to an element via the style attribute in your HTML (e.g., <div style="color: blue;">). The element.style property in JavaScript corresponds only to these styles.
  • Computed Styles: These are the final, calculated styles that are actually rendered by the browser. They are the result of merging styles from all sources—external stylesheets, internal <style> blocks, and inline styles—and resolving any conflicts.

Problem: let's look at an element that has styles from both a stylesheet and an inline attribute.

<head>
  <style>
    #box {
      color: white; /* From a stylesheet */
    }
  </style>
</head>
<body>
  <div id="box" style="background-color: salmon;">
    Hello world
  </div>
</body>

If we try to read both color and background-color using just element.style, we will get an unexpected result.

Solution: Using the Right Tool

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

// Attempting to read 'color' from the inline style property:
console.log(box.style.color);
// Output: "" (an empty string)
// This is because 'color' is NOT in the inline style attribute.

// Attempting to read 'background-color':
console.log(box.style.backgroundColor);
// Output: "salmon"
// This works because 'background-color' IS in the inline style attribute.

// Now, using getComputedStyle to read the final, rendered style:
const computedStyles = window.getComputedStyle(box);
console.log(computedStyles.color);
// Output: "rgb(255, 255, 255)" (the browser's computed value for "white")

This example clearly shows that element.style cannot see styles from stylesheets.

How to Check and Manage Inline Styles with element.style​

The element.style property is your tool for interacting with the style="..." attribute.

Checking an Inline Style​

You can check if an inline style is set by accessing it as a property. If the property is not set in the inline style attribute, it returns an empty string, which is a "falsy" value.

const box = document.getElementById('box'); // From our HTML example

if (box.style.backgroundColor) {
  console.log('✅ The inline background-color is:', box.style.backgroundColor);
} else {
  console.log('⛔️ The background-color is not set as an inline style.');
}
note

CSS property names with hyphens (like background-color) are converted to camelCase (like backgroundColor) when accessed as properties of the style object.

Setting and Removing Inline Styles​

The style property is also used to dynamically change an element's inline styles.

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

// To set or update a style:
box.style.backgroundColor = 'lime';
box.style.border = '2px solid black';

// To remove a style, set it to an empty string or null.
box.style.border = '';

How to Read Computed Styles with getComputedStyle()​

When you need to know the actual style of an element as it appears on the screen, window.getComputedStyle() is the correct tool. This method returns a read-only object containing the final values of all CSS properties.

The Syntax:

const styles = window.getComputedStyle(element);
const color = styles.color;

Solution: this example correctly reads the color property that was set in our stylesheet.

const box = document.getElementById('box');
const computedStyles = window.getComputedStyle(box);

// Now we can reliably read ANY style, regardless of its source.
console.log('Final Color:', computedStyles.color);
console.log('Final Font Size:', computedStyles.fontSize);
console.log('Final Background Color:', computedStyles.backgroundColor);

The values returned (like rgb(255, 255, 255) or 16px) are the browser's calculated, absolute values.

Conclusion: Which Method Should You Use?​

The choice is simple once you know the difference:

  • Use element.style when you want to read, set, or remove inline styles specifically. It is your tool for direct, dynamic manipulation of the style attribute.
  • Use window.getComputedStyle(element) when you want to read the final, rendered style of an element for inspection. This is the only reliable way to know what the user is actually seeing.

By understanding this fundamental distinction, you can avoid common bugs and write more accurate and robust DOM manipulation scripts.

Table of Contents