## Window getComputedStyle() Method
The `getComputedStyle()` method is a built-in Web API method used to retrieve the resolved, computed CSS styles of a specified element.
Unlike the `element.style` property (which only returns inline styles defined directly on the element), `getComputedStyle()` returns the final, actual styles applied to the element after the browser has resolved all stylesheets, inheritance, and browser default styles.
---
## Syntax
```javascript
window.getComputedStyle(element, pseudoElement);
```
### Parameters
| Parameter | Type | Description |
| :--- | :--- | :--- |
| `element` | *Element* | **Required.** The target DOM element whose computed styles you want to retrieve. |
| `pseudoElement` | *String* | **Optional.** A string specifying the pseudo-element to match (e.g., `":before"`, `":after"`). If you want to query the element itself, omit this parameter or pass `null` (or `undefined`). |
### Return Value
Returns a live **`CSSStyleDeclaration`** object. This object automatically updates when the element's styles are changed.
---
## Browser Support
The numbers in the table specify the first browser version that fully supports this method:
| Method | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **`getComputedStyle()`** | 11.0 | 9.0 | 4.0 | 5.0 | 11.5 |
---
## Code Examples
### Example 1: Get the Computed Background Color of an Element
This example demonstrates how to retrieve the final rendered background color of a `div` element.
```html
Click the button to see my background color.
```
### Example 2: Reading Pseudo-element Styles
You can also use `getComputedStyle()` to read styles applied to pseudo-elements like `::before` or `::after`.
```css
/* CSS */
#box::before {
content: "Hello ";
color: red;
font-weight: bold;
}
```
```javascript
// JavaScript
var box = document.getElementById("box");
var beforeStyle = window.getComputedStyle(box, "::before");
// Retrieve the color of the ::before pseudo-element
console.log(beforeStyle.getPropertyValue("color")); // Outputs: rgb(255, 0, 0)
```
---
## Key Considerations & Best Practices
### 1. `getComputedStyle()` vs. `element.style`
* **`element.style`**: Only reads or writes **inline** styles (e.g., `
`). It cannot read styles defined in external CSS stylesheets or `
YouTip