JavaScript getComputedStyle
Summary: in this tutorial, you will learn how to use the JavaScript getComputedStyle() to get the computed CSS properties of an element.
Introduction to JavaScript getComputedStyle() method
The getComputedStyle() is a method of the window object, which returns an object that contains the computed style an element:
let style = window.getComputedStyle(element [,pseudoElement]);
Code language: JavaScript (javascript)
Parameters
The getComputedStyle() method accepts two arguments:
elementis the element that you want to return the computed styles. If you pass another node type e.g., Text node, the method will throw an error.pseudoElementspecifies the pseudo-element to match. It defaults tonull.
For example, if you want to get the computed value of all the CSS properties of a link with the hover state, you pass the following arguments to the getComputedStyle() method:
let link = document.querySelector('a');
let style = getComputedStyle(link,':hover');
console.log(style);
Code language: JavaScript (javascript)
Note that window is the global object, therefore, you can omit it when calling get the getComputedStyle() method.
Return value
The getComputedStyle() method returns a live style object which is an instance of the CSSStyleDeclaration object. The style is automatically updated when the styles of the element are changed.
JavaScript getComputedStyle() examples
Let’s take some examples of using the getComputedStyle() method.
1) Simple getComputedStyle() example
Consider the following example:
<html><head>
<meta charset="utf-8">
<title>JS getComputedStyle() Demo</title>
<style type="text/css">
.message {
background-color: #fff3d4;
border: solid 1px #f6b73c;
padding: 20px;
color: black;
}
</style>
</head>
<body>
<p class="message" style="color:red">
This is a JS getComputedStyle() Demo!
</p>
<script>
let message = document.querySelector('.message');
let style = getComputedStyle(message);
console.log('color:', style.color);
console.log('background color:', style.backgroundColor);
</script>
</body>
</html>
Code language: HTML, XML (xml)
Note that for the demonstration purpose, we mix all CSS and JavaScript with HTML. In practice, you should separate them in different files.
Output:
color: rgb(255, 0, 0)
background color: rgb(255, 243, 212)
How it works:
- First, define CSS rules for the
messageclass in the head section of the HTML file. The text color is black. - Second, declare a paragraph element whose text color is red as defined in the inline style. This rule will override the one defined in the head section.
- Third, use the
getComputedStyle()method to get all the computed style of the paragraph element. The color property is red as indicated in the Console window (rgb(255, 0, 0)) as expected.
2) The getComputedStyle() for pseudo-elements example
The following example uses the getComputedStyle() method to pull style information from a pseudo-element:
<html>
<head>
<title>JavaScript getComputedStyle() Demo</title>
<style>
body {
font: arial, sans-serif;
font-size: 1em;
line-height: 1.6;
} p::first-letter {
font-size: 1.5em;
font-weight: normal
}
</style>
</head>
<body>
<p id='main'>JavaScript getComputedStyle() Demo for pseudo-elements</p>
<script>
let p = document.getElementById('main');
let style = getComputedStyle(p, '::first-letter');
console.log(style.fontSize);
</script>
</body>
</html>Code language: HTML, XML (xml)
Output:
24px
How it works:
- First, define CSS rules for the first letter of any paragraph element in the head section of the HTML file.
- Then, use the
getComputedStyle()method to pull the computed style of the pseudo-element. The font-size of the first letter of the paragraph with the id is 24px.
Summary
- The
getComputedStyle()is a method of thewindowobject. - The
getComputedStyle()method returns an object that contains the computed style of an element.