A CSS Style Declaration object is generated by the getComputedStyle function. This function offers elements the CSS properties and their corresponding values through the JavaScript window's getComputedStyle method. The element reveals multiple styling sources by utilizing the computed style within the tag.
Syntax
The syntax presented below illustrates the utilization of the getComputedStyle method in JavaScript within a Windows environment.
Var variable_name = window.getComputedStyle(element, pseudoElement);
The syntax presented below illustrates the getComputedStyle function.
Var variable_name = getComputedStyle(element, pseudoElement);
Parameters:
The getComputedStyle function can accept two parameters:
- The first argument refers to the element for which you intend to retrieve the computed styles. If you provide a different kind of node, like a Text node, the method will produce an error.
- The second argument, pseudoElement, indicates the pseudo-element for which you wish to retrieve styles. By default, this value is set to null, and this parameter is not mandatory.
Return value
- The live style object element of the CSS Style Declaration is obtained through the getComputedStyle function.
- Any alterations made to the element's styles will prompt an automatic update of the style.
- 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.
How it works
Examples of getComputedStyle in JavaScript
The examples provided below demonstrate the utilization of the style tag alongside the properties relevant to the getComputedStyle function. The CSS attributes required for the getComputedStyle method are as follows:
Example 1: The subsequent illustration demonstrates a fundamental use of the getComputedStyle function. It highlights the padding, color, border, and background color through the utilization of this JavaScript method. The CSS values are defined 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 illustration displays the CSS styling utilized for the functionality of the web page.
Example 2: The subsequent illustration demonstrates a fundamental use of the getComputedStyle method. It presents the padding, color, border, and background color both with and without utilizing the CSS style tag. It is important to note that the method does not reveal the default styles when using getComputedStyle.
<!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 illustration displays the CSS styling associated with the functionality of the web page.
Example 3: Within the head section of the HTML document, define the CSS styles that will apply to the initial letter of each paragraph element.
The computed style for the pseudo-element can subsequently be retrieved through the use of the getComputedStyle function. The first letter of the paragraph that has the specified id is set to 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 illustrates the CSS styling associated with the functionality of the web page.
Example 4: The subsequent example illustrates the utilization of the getComputedStyle method in conjunction with an inline style attribute. This demonstration reveals the properties of font size, color, border, width, and background color as accessed through the JavaScript method. The CSS values are defined using the inline style attribute.
<!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 illustration depicts the inline CSS styling utilized within the functionality of the web page.
Example 5: The subsequent example illustrates the utilization of the window.getComputedStyle method in conjunction with the style tag. This demonstration highlights the properties applied to the page, focusing on both the element and its pseudo-element via the JavaScript function. The CSS value is specified using the style tag located within the head section of the webpage.
<!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 illustration depicts the inline CSS styling utilized within the functionality of the web page.
Example 6: In this example, we will demonstrate the usage of the window.getComputedStyle method in conjunction with the style tag. The properties utilized on the page will include both the element itself and a pseudo-null element, employing the JavaScript method. The CSS values are defined using a style tag; however, it is not necessary to apply them directly to 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 illustration displays all the CSS styles associated with the functions of the web page.
Conclusion
The getComputedStyle function is utilized to retrieve the CSS properties that are applicable to a specific element. Various properties can be used with the style tag, and these can be presented as output.