# getComputedStyle()

### Introduction to JavaScript `getComputedStyle()` method

The `getComputedStyle()` is a method of the [`window`](https://www.javascripttutorial.net/javascript-bom/javascript-window/) object, which returns an object that contains the computed style an element:

```javascript
let style = window.getComputedStyle(element [,pseudoElement]);
Code language: JavaScript (javascript)
```

#### Parameters

The `getComputedStyle()` method accepts two arguments:

* `element` is 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.
* `pseudoElement` specifies the pseudo-element to match. It defaults to `null`.

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:

```javascript
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:

```xml
<!DOCTYPE html>
<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 `message` class 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:

```xml
<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 the `window` object.
* The `getComputedStyle()` method returns an object that contains the computed style of an element.
