javascript css property

JavaScript: Getting Computed CSS Property Values

By /

When you write CSS for a web page, you can give styles to elements in many different ways. You can use classes, IDs, tags, or even add styles directly in HTML. Sometimes, more than one rule might apply to the same element. When that happens, the browser has to choose which style to use. It follows special rules like specificity and inheritance to decide which one wins.

After the browser has figured everything out, it ends up with one final set of styles for each element. This final result is called the computed CSS. It’s what the browser actually uses to draw the page.

When you’re using JavaScript, you might want to check what styles the browser ended up using. For example, you might want to know the real background color of a button or the exact padding around a box. But if you look at element.style, it only shows styles written directly in the HTML. That doesn’t include styles from CSS files, classes, or anything the browser figured out on its own.

JavaScript can read Computed CSS values using the built-in getComputedStyle() method. This method shows you the real styles the browser is using—even if they came from a class, a stylesheet, or were inherited from a parent element.

In this article, we’ll learn how to use getComputedStyle() with full examples and clear explanations. Let’s begin by looking at the difference between inline styles and computed styles.

Inline Styles vs Computed Styles

What Are Inline Styles?

Inline styles are styles that you write directly inside an HTML tag. For example, if you want a <div> to have red text, you can add the style right inside the tag like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Inline Styles Example</title>
</head>
<body>

  <div id="dragon" style="color: red;">Dragon</div>

  <script>
    const dragon = document.getElementById('dragon');
    console.log(dragon.style.color); // "red"
  </script>

</body>
</html>

Here, dragon.style.color returns "red" because that color was set directly inside the HTML tag. Inline styles are easy to find with .style because they are written right on the element itself.

computed css

However, .style only shows styles set inline like this. It does not show styles applied through CSS classes or external stylesheets.

What Are Computed Styles?

Computed styles are the final styles the browser applies to an element after combining all CSS rules. These styles can come from CSS classes, external stylesheets, or inherited from parent elements. They are the real styles the browser uses to display the page.

For example, consider this HTML and CSS:

<!DOCTYPE html>
<html lang="en">
<head>

  <style>

    #phoenix {
      color: orange;
    }

  </style>

  <title>Computed Styles Example</title>

</head>
<body>

  <div id="phoenix">Phoenix</div>

  <script>

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

    console.log(phoenix.style.color); // "" (empty)
    console.log(getComputedStyle(phoenix).color); // "rgb(255, 165, 0)"

  </script>

</body>
</html>

Here, the color orange is applied via a CSS rule in the stylesheet, not as an inline style.

If you try to get the color using .style.color in JavaScript, it will be empty because no inline style was set.

computed css

But when you use getComputedStyle(), you get the real color the browser uses, shown as an RGB value. This shows the computed CSS color—what the browser actually applied to the element.

Why This Difference Is Important

When you use .style in JavaScript, you only see the styles that were set directly on the element using inline styles. This means if a color or size comes from a CSS file or a class, .style won’t show it.

On the other hand, getComputedStyle() shows you the full, final style the browser is actually using. This is the computed CSS — the real values after all the rules have been combined and the browser has made its decision.

Knowing the difference is important because sometimes you need to work with the real styles to make your page behave correctly. For example, if you want to move an element based on its size, you need to know the size the browser uses—not just what you tried to set inline.

Using getComputedStyle() lets you read these real styles, which is very useful when debugging your page or calculating layouts in JavaScript.

How to Use getComputedStyle()

To get the computed styles of any HTML element, you use the getComputedStyle() function in JavaScript. You pass the element you want to check, and it returns an object with all the final CSS values the browser is using.

Here’s the simplest example:

<!DOCTYPE html>
<html lang="en">
<head>

  <title>Basic getComputedStyle Example</title>

  <style>

    #box {
      color: blue;
    }

  </style>

</head>
<body>

  <div id="box">Look at me!</div>

  <script>
    const box = document.getElementById('box');
    const styles = getComputedStyle(box);
    const color = styles.color;

    console.log(color); // e.g. "rgb(0, 0, 255)"

  </script>

</body>
</html>

In this code, styles holds all the computed CSS properties for the given element. You can then read any property you want, like color, paddingTop, or margin.

computed css

The object CSSStyleDeclaration, returned by getComputedStyle() is read-only. This means you can look at its values, but you cannot change them directly through this object.

If you want to change an element’s style, you still need to use the .style property on the element itself or modify the CSS rules directly.

Accessing Specific Properties

When you use getComputedStyle(), you can get any CSS property from the returned object in two ways.

The first way is to use camelCase property names, which means you write the CSS property as one word, with the second part capitalized. For example, padding-top becomes paddingTop.

The second way is to use the property name as a string, exactly as it appears in CSS, with the dash included and wrapped in quotes.

Here is an example showing both ways to get the padding-top value:

<!DOCTYPE html>
<html lang="en">
<head>

  <style>

    #box {
      padding-top: 10px;
    }

  </style>

  <title>Accessing CSS Properties</title>

</head>
<body>

  <div id="box">Padding top test</div>

  <script>

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

    console.log(styles.paddingTop);     // e.g. "10px"
    console.log(styles["padding-top"]); // also "10px"

  </script>

</body>
</html>

Both will give you the same result. This is helpful because sometimes you may prefer one style over the other, especially when accessing properties dynamically.

computed css

Some common examples you can read are:

  • backgroundColor which might return a value like "rgb(173, 216, 230)"
  • marginTop or borderLeftWidth
  • Or using strings like "font-size"

These let you access any computed CSS property you need.

Real Example: The Talking Parrot

Let’s see a real example that shows how to use getComputedStyle() to read styles applied from CSS classes.

In this example, we have a <div> with the class parrot. The CSS sets its background color to sky blue, the font size to 20 pixels, and adds 10 pixels of padding at the top.

<!DOCTYPE html>
<html lang="en">
<head>

  <style>

    .parrot {
      background-color: skyblue;
      font-size: 20px;
      padding-top: 10px;
    }

  </style>

  <title>Talking Parrot Example</title>

</head>
<body>

  <div class="parrot" id="polly">Polly wants a cracker!</div>

  <script>

    const polly = document.getElementById('polly');
    const styles = getComputedStyle(polly);

    console.log(styles.backgroundColor); // "rgb(135, 206, 235)"
    console.log(styles.fontSize);        // "20px"
    console.log(styles.paddingTop);      // "10px"
    console.log(styles["padding-top"]);  // also "10px"

  </script>

</body>
</html>

Here, styles.backgroundColor returns the actual color the browser uses, shown as an RGB value. The font size and padding top also return the exact computed values. Notice that you can access padding-top using both camelCase (paddingTop) and the string key ("padding-top"), and both work the same way.

computed css

This example shows how getComputedStyle() helps you read the real styles applied to elements, even when they come from CSS classes.

Getting Styles from Pseudo-Elements

Sometimes, CSS adds extra decorations to elements using pseudo-elements like ::before or ::after. These are special parts of an element that don’t appear in the HTML but can have their own styles.

To get the computed styles for these pseudo-elements, you use a second argument in getComputedStyle(). This argument is a string naming the pseudo-element you want, like ::before.

<!DOCTYPE html>
<html lang="en">
<head>

  <style>

    #owl::before {
      content: "🦉";
      color: brown;
      font-size: 30px;
      margin-right: 5px;
    }

  </style>

  <title>Pseudo-element Styles</title>

</head>
<body>

  <div id="owl">Wise Owl</div>

  <script>

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

    const beforeStyles = getComputedStyle(owl, "::before");
    console.log(beforeStyles.content);     // "🦉" (shown with quotes)
    console.log(beforeStyles.color);       // "rgb(165, 42, 42)" (brown)
    console.log(beforeStyles.fontSize);    // "30px"

  </script>

</body>
</html>

Here, we get the computed styles of the ::before pseudo-element by passing "::before" as the second argument to getComputedStyle(). This way, you can check the styles for decorations added by CSS without them existing in your HTML.

computed css

Conclusion

The .style property shows only the styles set directly on an element as inline styles. It does not include styles from CSS files, classes, or inherited rules.

To get the full Computed CSS that the browser actually uses, you use getComputedStyle(). This method reads all styles combined, no matter where they come from.

You can access properties from the computed style object using either camelCase (like backgroundColor) or the CSS-style kebab-case as string keys (like "background-color").

The object returned by getComputedStyle() is read-only, making it a safe and reliable way to read styles without accidentally changing anything.

References

Related Posts

Scroll to Top