Posted By
Bajarangi soft ,
Posted On 01-10-2020
The computed style is the style actually used in displaying the element, after "stylings" from multiple sources have been applied.
Style sources can include: internal style sheets, external style sheets, inherited styles and browser default styles.
The getComputedStyle() method returns a CSSStyleDeclaration object.
Syntax and Usage
window.getComputedStyle(element, pseudoElement)
Parameter Values
| Parameter | Description |
|---|---|
| element | Required. The element to get the computed style for |
| pseudoElement | Optional. A pseudo-element to get |
Return Value: A CSSStyleDeclaration object containing CSS declaration block of the element.
<button class="btn btn-primary" onclick="myFunction()">CLick it</button>
<h2 id="demo1"></h2>
<div id="test" style="height: 50px;background-color: lightblue;">Test Div</div>
<script>
function myFunction(){
var elem = document.getElementById("test");
var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
document.getElementById("demo1").innerHTML = theCSSprop;
}
</script>
<div id="test" style="height: 50px;background-color: lightblue;">Test Div</div>
<p>The computed styles for the test div are: <br><span id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var txt;
cssObj = window.getComputedStyle(elem, null)
for (i = 0; i < cssObj.length; i++) {
cssObjProp = cssObj.item(i)
txt += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
In above example when i click the button it will get all the computed styles for the test div
<div id="test" style="height: 50px;background-color: lightblue;">Test Div</div>
<p>The computed font size for div::first-letter in the test div is: <span id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var theCSSprop = window.getComputedStyle(elem, ":first-letter").getPropertyValue("font-size");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script>
In above example when i click the button it will get the computed background color for the test div.
Complete Code For Window GetComputedStyle Method In JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Window GetComputedStyle Method In JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<br>
<br>
<div class="text-center">
<h1>Window GetComputedStyle Method In JavaScript</h1>
</div>
<br>
<div class="well">
<button class="btn btn-primary" onclick="myFunction()">CLick it</button>
<h2 id="demo1"></h2>
<div id="test" style="height: 50px;background-color: lightblue;">Test Div</div>
</div>
</body>
</html>
<script>
function myFunction(){
var elem = document.getElementById("test");
var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
document.getElementById("demo1").innerHTML = theCSSprop;
}
</script>