Skip to main content

getComputedStyle in JavaScript DOM (Live Playground)

In this tutorial, we will learn about the getComputedStyle method in JavaScript DOM, which allows you to access the computed CSS values of HTML elements. This includes styles from stylesheets, inheritance, and browser defaults. We'll cover what computed styles are, how to use the getComputedStyle method, and practical examples of its usage.

What are Computed Styles?​

Computed styles represent the final, effective CSS values applied to an HTML element after considering styles from stylesheets, inheritance, and browser defaults. They are different from inline styles, which are directly applied to an element using the style attribute or through JavaScript DOM manipulation.

Using the getComputedStyle Method​

The getComputedStyle method is a window method that takes an HTML element as its argument and returns an object containing the computed CSS values of that element. The syntax is as follows:

var computedStyles = window.getComputedStyle(element);

Sample Code: Accessing Computed Styles​

Let's say we have the following simple HTML document with an external CSS stylesheet:

<!DOCTYPE html>
<html>
  <head>
    <title>getComputedStyle Example</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 id="mainHeading">Welcome to My Web Page!</h1>
  </body>
</html>

And the content of the styles.css file:

h1 {
  color: red;
  font-size: 36px;
  font-family: Arial, sans-serif;
}

We'll now use JavaScript and the getComputedStyle method to access the computed styles of the h1 element with the ID mainHeading. First, include a JavaScript <script> tag in your HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>getComputedStyle Example</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 id="mainHeading">Welcome to My Web Page!</h1>

    <script>
      // Select the element with the ID "mainHeading"
      var mainHeading = document.getElementById('mainHeading');

      // Get the computed styles of the "mainHeading" element
      var computedStyles = window.getComputedStyle(mainHeading);

      console.log(computedStyles.color); // Outputs "rgb(255, 0, 0)"
      console.log(computedStyles.fontSize); // Outputs "36px"
      console.log(computedStyles.fontFamily); // Outputs "Arial, sans-serif"
    </script>
  </body>
</html>

After running this code, the console will output the computed styles for the color, font size, and font family properties of the h1 element.

Live Playground, Try it Yourself

Conclusion​

The getComputedStyle method is a powerful tool for accessing the computed CSS values of HTML elements, considering styles from stylesheets, inheritance, and browser defaults. By understanding how to use getComputedStyle, you can perform various tasks, such as comparing the styles of different elements, determining the final values applied to an element, or debugging your CSS code.

Keep in mind that the values returned by getComputedStyle are read-only. To modify the styles of an element, you should use inline styles or modify the appropriate CSS rules in stylesheets.

With the knowledge of getComputedStyle, you can now access and work with computed CSS values in your JavaScript DOM projects, providing more control over the styles and appearance of your web pages. This understanding will prove invaluable as you continue to develop and enhance your web development skills.