What Does getComputedStyle() Method of Window Object do in JavaScript

June 3, 2023 | by Arround The Web | No comments

What Does getComputedStyle() Method of Window Object do in JavaScript

CSS Styling properties beautify the website content and provide an attractive look to the front end of a website, thereby engaging the user. These properties are easy to set via the “style” HTML element and can be computed using the JavaScript “getComputedStyle()” method. This method computes all the applied CSS styling properties alongside their values of the associated HTML element.

This post pens down the objective, working, and usage of the “getComputedStyle()” method of window object in JavaScript.

What Does the “getComputedStyle()” Method of Window Object Do in JavaScript?

The “getComputedStyle()” method returns the “CSSStyleDeclaration” object that contains a collection of the CSS properties and their values. It computes the targeted HTML element styling properties. In addition, it also plays a significant role in computing the styling properties of the specific part of the HTML element.

Syntax

window.getComputedStyle(element, pseudoElement)

In the above syntax:

window: It is the global object that represents the browser window.
element: It specifies the particular HTML element whose style needs to be computed.
pseudoElement: It refers to the part of the given HTML element e.g., first-letter, last letter, etc.

The following section carries out the practical illustration of the “getComputedStyle()” method with the help of examples.

HTML Code (Including CSS Styling)

First, have an overview of the following HTML code:

<head>
<style>
h3{
font-size: 20px;
background-color:greenyellow
}
</style>
</head>
<body>
<h2> Use getComputedStyle() Method of Window Object</h2>
<h3 id="demo">Font size of the given HTML element is:</h3>
<p id="sample"></p>

In the above lines of code:

The “<style>” tag applies the stated styling of the “<h3>” HTML element.
In the “<body>” section, a subheading is included in the “<h2>”
Next, the “<h3>” element having an id “demo” specifies a second subheading.
Lastly, the “<p>” tag refers to an empty paragraph with an id “sample” for displaying the computed CSS properties of the targeted element.

Note: This HTML code is followed throughout all the stated examples of this post.

Example 1: Applying the “getComputedStyle()” Method to Compute the Font Size of the HTML Element

This example applies the “getComputedStyle()” method to get the font size of the target HTML element.

JavaScript Code

Consider the stated JavaScript code:

In the above code snippet:

Declare a variable “elem” with a “const” keyword that utilizes the “getElementById()” method to access the “<h3>” element via its id “demo”.
After that, apply the “getComputedStyle()” method to compute the CSS properties of the fetched “<h3>” element.
Next, the “size” variable applies the “getPropertyValue()” method that returns the value of the applied CSS property “font-size” as a string.
Lastly, the “getElementById()” method accesses the empty paragraph and displays the calculated CSS property value using the “innerHTML” property.

Output

As seen, the output displays the applied font-size value against the corresponding HTML element i.e., “<h3>”.

Example 2: Applying the “getComputedStyle()” Method to Compute the Background Color of the HTML Element

In this example, the discussed method is utilized to compute the background color of the specific HTML element:

In the above code block, the “getComputedStyle()” method computes the “background-color” of the “<h3>” element whose id is “demo” and returns its value as “rgb” via the “getPropertyValue()” method.

Output

The output clearly shows the computed background color of the fetched HTML element.

Conclusion

JavaScript offers the “getComputedStyle()” method for calculating the CSS styling properties of the target HTML element. The computed value of this method is a string that contains the CSS properties and their values. It can be implemented in different ways using JavaScript to get the CSS properties of any HTML element. This post provided a detailed view of the objective, working, and usage of the “getComputedStyle()” method of the window object in JavaScript.

Source: linuxhint.com