JAVASCRIPT
Retrieve an Element's Computed CSS Styles
Learn to retrieve the final, calculated CSS styles of any DOM element, including styles from stylesheets, inline declarations, and user agents, using JavaScript's `window.getComputedStyle()`.
function getElementComputedStyle(elementId, property = '') {
const element = document.getElementById(elementId);
if (!element) {
console.error(`Element with ID "${elementId}" not found.`);
return null;
}
const computedStyle = window.getComputedStyle(element);
if (property) {
// Return a specific property if requested
return computedStyle.getPropertyValue(property);
} else {
// Return the entire CSSStyleDeclaration object
return computedStyle;
}
}
// Example Usage:
// Assume HTML: <p id="styledParagraph" style="color: red; font-size: 16px;">Some text</p>
// And CSS: #styledParagraph { background-color: blue; padding: 10px; }
const paragraphColor = getElementComputedStyle('styledParagraph', 'color');
console.log('Paragraph Color:', paragraphColor); // Expected: rgb(255, 0, 0)
const paragraphBgColor = getElementComputedStyle('styledParagraph', 'background-color');
console.log('Paragraph Background Color:', paragraphBgColor); // Expected: rgb(0, 0, 255)
const paragraphPadding = getElementComputedStyle('styledParagraph', 'padding');
console.log('Paragraph Padding:', paragraphPadding); // Expected: 10px
const allStyles = getElementComputedStyle('styledParagraph');
console.log('All Computed Styles:', allStyles.fontSize, allStyles.display); // Access properties directly
How it works: This snippet provides a way to inspect the final, rendered styles of any DOM element using `window.getComputedStyle()`. Unlike `element.style`, which only reflects inline styles, `getComputedStyle` returns an object containing all CSS property values as they are actually displayed, regardless of their origin (stylesheets, inline styles, user agent defaults). This is invaluable for debugging layouts, dynamically adjusting positions, or performing calculations based on an element's true visual properties.