JavaScript getComputedStyle
last modified April 2, 2025
In this article, we explore the window.getComputedStyle method in
JavaScript. This method is essential for accessing computed CSS styles of DOM
elements, including those from stylesheets and inline styles.
Basic Definition
The window.getComputedStyle method returns an object containing all
CSS properties of an element, computed from both stylesheets and inline styles.
It provides the final values used by the browser to render the element.
Unlike element.style, which only returns inline styles,
getComputedStyle returns all styles affecting the element. This
includes default browser styles and styles from CSS rules.
Basic getComputedStyle
This example demonstrates how to access computed styles of a simple div element.
<!DOCTYPE html>
<html>
<head>
<title>Basic getComputedStyle</title>
<style>
#myDiv {
width: 200px;
height: 100px;
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div id="myDiv">Sample Content</div>
<script>
const div = document.getElementById('myDiv');
const styles = window.getComputedStyle(div);
console.log('Background color:', styles.backgroundColor);
console.log('Width:', styles.width);
console.log('Height:', styles.height);
console.log('Padding:', styles.padding);
</script>
</body>
</html>
In this basic example, we have a styled div element. The JavaScript code uses
getComputedStyle to access all computed CSS properties of the div.
The method returns a CSSStyleDeclaration object containing all
computed styles. We then log several style properties to the console. Note that
values are returned in their computed form (e.g., "rgb(173, 216, 230)").
Accessing Pseudo-element Styles
This example shows how to access styles of pseudo-elements using getComputedStyle.
<!DOCTYPE html>
<html>
<head>
<title>Pseudo-element Styles</title>
<style>
#quote::before {
content: "“";
font-size: 2em;
color: red;
}
#quote::after {
content: "”";
font-size: 2em;
color: blue;
}
</style>
</head>
<body>
<p id="quote">To be or not to be</p>
<script>
const quote = document.getElementById('quote');
// Get styles for ::before pseudo-element
const beforeStyles = window.getComputedStyle(quote, '::before');
console.log('Before content:', beforeStyles.content);
console.log('Before color:', beforeStyles.color);
// Get styles for ::after pseudo-element
const afterStyles = window.getComputedStyle(quote, '::after');
console.log('After content:', afterStyles.content);
console.log('After color:', afterStyles.color);
</script>
</body>
</html>
Here we have a paragraph with styled ::before and ::after pseudo-elements. The
JavaScript code uses the second parameter of getComputedStyle to
access these pseudo-element styles.
This demonstrates how to inspect styles applied to pseudo-elements, which can't be accessed through regular DOM methods. The second parameter specifies which pseudo-element to target.
Comparing Inline and Computed Styles
This example demonstrates the difference between inline styles and computed styles.
<!DOCTYPE html>
<html>
<head>
<title>Inline vs Computed Styles</title>
<style>
#compare {
font-size: 18px;
color: green;
}
</style>
</head>
<body>
<div id="compare" style="color: red; font-weight: bold;">
Style Comparison
</div>
<script>
const div = document.getElementById('compare');
// Inline styles
console.log('Inline color:', div.style.color);
console.log('Inline font-size:', div.style.fontSize);
// Computed styles
const computed = window.getComputedStyle(div);
console.log('Computed color:', computed.color);
console.log('Computed font-size:', computed.fontSize);
console.log('Computed font-weight:', computed.fontWeight);
</script>
</body>
</html>
In this example, we have a div with both stylesheet and inline styles. The
JavaScript code compares what's accessible via element.style versus
getComputedStyle.
The key difference is that element.style only shows inline styles,
while getComputedStyle shows all applied styles, including those
from stylesheets. Also note that element.style properties are
camelCased (fontSize), while computed styles are hyphenated (font-size).
Checking Visibility Status
This example shows how to use getComputedStyle to check if an element is visible.
<!DOCTYPE html>
<html>
<head>
<title>Checking Visibility</title>
<style>
#hidden {
display: none;
}
#visible {
visibility: hidden;
}
</style>
</head>
<body>
<div id="hidden">This is hidden with display: none</div>
<div id="visible">This is hidden with visibility: hidden</div>
<div id="normal">This is normally visible</div>
<script>
function checkVisibility(id) {
const el = document.getElementById(id);
const style = window.getComputedStyle(el);
console.log(`${id} visibility:`, style.visibility);
console.log(`${id} display:`, style.display);
console.log(`${id} is visible:`,
style.display !== 'none' && style.visibility !== 'hidden');
}
checkVisibility('hidden');
checkVisibility('visible');
checkVisibility('normal');
</script>
</body>
</html>
Here we have three divs with different visibility states. The JavaScript function
uses getComputedStyle to check their display and visibility
properties.
This demonstrates how to programmatically determine if an element is visible.
Note that both display: none and visibility: hidden
affect visibility differently, and both need to be checked for a complete
assessment.
Animating with Computed Styles
This example shows how to use getComputedStyle in animations by reading current values before animating.
<!DOCTYPE html>
<html>
<head>
<title>Animation with Computed Styles</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: coral;
position: relative;
left: 0;
transition: left 1s ease;
}
</style>
</head>
<body>
<div id="box"></div>
<button onclick="moveBox()">Move Box</button>
<script>
function moveBox() {
const box = document.getElementById('box');
const style = window.getComputedStyle(box);
// Get current left position (returns '0px')
const currentLeft = parseInt(style.left);
// Move to new position based on current position
box.style.left = `${currentLeft + 100}px`;
}
</script>
</body>
</html>
In this example, we have a box that moves right when a button is clicked. The
JavaScript uses getComputedStyle to read the current left position
before calculating the new position.
This demonstrates how getComputedStyle can be used in animations
to read current property values. Note that we use parseInt to
convert the 'px' string value to a number for calculations.
Source
MDN getComputedStyle Documentation
In this article, we have shown how to use window.getComputedStyle
in JavaScript. This method is essential for accessing complete style information
and creating dynamic, style-aware applications.
Author
List all JS DOM tutorials.