JavaScript windows getComputedStyle() Method

A CSS Style Declaration object results from the getComputedStyle() function. It is provided elements of the CSS properties and values using the javascript windows getComputedStyle() function. The element displays various sources of styling using computed style in the tag.

Syntax

The following syntax shows the windows getComputedStyle() method using JavaScript.

The following syntax shows the getComputedStyle() method.

Parameters:

Two arguments can be passed to the getComputedStyle() method:

You want to return the calculated styles is called an element. The method will return an error if you pass another type of node, such as a Text node.
The pseudoElement specifies the pseudo-element to match style. The default value is null, and the parameter is optional.

Return value

The CSS Style Declaration object's live style object element results from the getComputedStyle() method.
When the element's styles are modified, the style is updated automatically.

How it works

First, establish the message class's CSS rules in the HTML file's head section.
Second, specify a paragraph element with red content using the inline style. This one shall supersede the regulation outlined in the head section.
Third, obtain every calculated style associated with the paragraph element use the getComputedStyle() function.

Examples of getComputedStyle() in JavaScript

The following examples use the style tag and properties for the getComputedStyle() function. The CSS properties necessary for the getComputedStyle() method

Example 1: the following example shows a basic getComputedStyle() method. The padding, color, border, and background color shows using the javascript method. The CSS value is set using the style tag.

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>JS getComputedStyle() Demo </title>
<style type="text/css">
#data {
background-color: orange;
border: solid 1px black;
padding: 10px;
color: aqua;
}
</style>
</head>
<body>
<h3> JavaScript getComputedStyle() Demo </h3>
<p id = "data">
This is a Javascript getComputedStyle() Information!
</p>
<script>
let message = document.querySelector('#data');
let style = getComputedStyle(message);
document.write('color:', style.color);
document.write('<br> background color:', style.backgroundColor);
document.write('<br> border color:', style.border);
document.write('<br> padding size:', style.padding);
</script>
</body>
</html>

Output

The image shows the CSS style of the web page's function.

JavaScript windows getComputedStyle() Method

Example 2: the following example shows a basic getComputedStyle() method. The padding, color, border, and background color shows using the CSS style tag and without the CSS style tag. the method does not show the default style using the getComputedStyle() method.

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>JS getComputedStyle() Demo </title>
<style type="text/css">
#data {
background-color: orange;
border: solid 1px black;
padding: 10px;
color: black;
}
</style>
</head>
<body>
<h3 id = "info"> JavaScript getComputedStyle() Demo </h3>
<p id = "data" style="color:aqua">
This is a Javascript getComputedStyle() Information!
</p>
<script>
let message = document.querySelector('#data');
let style = getComputedStyle(message);
document.write('color:', style.color);
document.write('<br> background color:', style.backgroundColor);
document.write('<br> border color:', style.border);
document.write('<br> padding size:', style.padding);
document.write('<br><br> Display Data Without Style Tag <br>');
let information = document.querySelector('#info');
let style_info = getComputedStyle(information);
document.write('<br> color:', style_info.color);
document.write('<br> background color:', style_info.backgroundColor);
document.write('<br> border color:', style_info.border);
</script>
</body>
</html>

Output

The image shows the CSS style of the web page's function.

Example 3: In the HTML file's head section, establish the CSS rules for each paragraph element's first letter.

The computed style of the pseudo-element can then be obtained using the getComputedStyle() function. The initial letter of the paragraph with the id has a font size of 16px.

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>JS getComputedStyle() Demo </title>
<style type="text/css">
#data {
background-color: silver;
border: solid 2px navy;
padding: 10px;
color: aqua;
}
#data::first-letter {
font-size: 1.2em;
font-weight: normal
}
</style>
</head>
<body>
<h3 id = "info"> JavaScript getComputedStyle() Demo </h3>
<p id = "data">
This is a Javascript getComputedStyle() Information!
</p>
<script>
let message = document.querySelector('#data');
let style = getComputedStyle(message);
document.write('color:', style.color);
document.write('<br> background color:', style.backgroundColor);
document.write('<br> border color:', style.border);
document.write('<br> padding size:', style.padding);
let styles = getComputedStyle(message, '::first-letter');
document.write('<br> font-size:', styles.fontSize);
document.write('<br> font-weigth:', styles.fontWeight);
</script>
</body>
</html>

Output

The image shows the CSS style of the web page's function.

Example 4: the following example shows a getComputedStyle() method with an inline style tag. The font size, color, border, width, and background color shows using the javascript method. The CSS value is set using the inline style tag.

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>JS getComputedStyle() Demo </title>
<style type="text/css">
</style>
</head>
<body>
<h3> JavaScript getComputedStyle() Demo </h3>
<p id = "data" style = " background-color: red; border: solid 2px black; padding: 10px; color: darkblue; font-size: 1.2em;
">
Javascript getComputedStyle() Information with Inline Style Tag!
</p>
<script>
let message = document.querySelector('#data');
let style = getComputedStyle(message);
document.write('color:', style.color);
document.write('<br> background color:', style.backgroundColor);
document.write('<br> border color:', style.border);
document.write('<br> padding size:', style.padding);
document.write('<br> font size:', style.fontSize);
</script>
</body>
</html>

Output

The image shows the inline CSS style of the web page's function.

Example 5: the following example shows a window.getComputedStyle() method with the style tag. The properties used in the page with the element and pseudo element using the javascript method. The CSS value is set using the style tag in the head section of the web page.

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>JS getComputedStyle() Demo </title>
<style type="text/css">
#data {
background-color: beige;
border: solid 2px navy;
color: black;
}
#data::first-letter {
font-size: 2.2em;
color:red;
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<h3 id = "info"> JavaScript Windows.getComputedStyle() Demo </h3>
<p id = "data">
This is a Javascript window.getComputedStyle() Information!
</p>
<script>
let message = document.querySelector('#data');
let style = window.getComputedStyle(message, null);
document.write('color:', style.color);
document.write('<br> background color:', style.backgroundColor);
document.write('<br> <br> <b> First Letter Design </b> <br>');
let styles = window.getComputedStyle(message, '::first-letter');
document.write('<br> font-size:', styles.fontSize);
document.write('<br> font-weigth:', styles.fontWeight);
document.write('<br> font-color:', styles.Color);
document.write('<br> font-style:', styles.fontStyle);
</script>
</body>
</html>

Output

The image shows the inline CSS style of the web page's function.

Example 6: the following example shows a window.getComputedStyle() method with the style tag. The properties used in the page with the element and pseudo null element using the javascript method. The CSS value is set using a style tag but does not need to use for the element.

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>JS getComputedStyle() Demo </title>
<style type="text/css">
#data {
background-color: beige;
border: solid 2px navy;
color: black;
}
#data::first-letter {
font-size: 2.2em;
color:red;
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<h3 id = "info"> JavaScript Windows.getComputedStyle() Demo </h3>
<p id = "data">
This is a Javascript window.getComputedStyle() Information!
</p>
<p id="demo"></p>
<script>
const element_value = document.getElementById("data");
const css_value = window.getComputedStyle(element_value, null);
let text_val = "";
for (x in css_value) { 
  css_valueProp = css_value.item(x)
  text_val += css_valueProp + " = " + css_value.getPropertyValue(css_valueProp) + "<br>";
}
document.getElementById("demo").innerHTML = text_val;
</script>
</body>
</html>

Output

The image shows all the CSS styles of the web page's functions.

Conclusion

The getComputedStyle method uses to show the available CSS properties of the element. We can use the different properties for the style tag and display it as an output.

Next TopicDifference between indexof and search in JavaScript

← prev next →