# getComputedStyle function

The `getComputedStyle` function allows you to get the value of any CSS property of an element, even from a CSS file.

## Syntax

`let object = getComputedStyle(element);`

## Details

How it works (attention: not as we expect): the function takes an element as a parameter, and returns an object that contains all the CSS properties of the passed element. Let's put this object into the variable `style`. The name is arbitrary, it's just a variable - as we come up with, we will refer:

`let elem = document.querySelector('#elem'); let style = getComputedStyle(elem); // style contains CSS properties`

Let's output, for example, the width. This is done like this - `style.width`:

`let elem = document.querySelector('#elem'); let style = getComputedStyle(elem); console.log(style.width);`

To display, for example, the left `padding` - do this - `style.paddingLeft`:

`let elem = document.querySelector('#elem'); let style = getComputedStyle(elem); console.log(style.paddingLeft);`

In the following example, we will display all the CSS properties we are interested in for our element:

`<div id="elem">text</div>` `#elem { width: 200px; height: 200px; padding: 30px; border: 20px solid #BCBCBC; overflow: auto; }` `let elem = document.querySelector('#elem'); let style = getComputedStyle(elem); console.log('paddingLeft: ' + style.paddingLeft); // shows '30px' console.log('borderTopWidth: ' + style.borderTopWidth); // shows '20px' console.log('borderTopStyle: ' + style.borderTopStyle); // shows 'solid'`

## getComputedStyle inaccuracy

Sometimes the `getComputedStyle` function does not work correctly with width and height. This is because `padding` and a border expand a block. In the following example, the block is given a width of `200px`, as well as a border and `border`. The actual block width is `300px`, but `getComputedStyle` will still output `200px`:

`<div id="elem">text</div>` `#elem { width: 200px; height: 200px; padding: 30px; border: 20px solid #BCBCBC; overflow: auto; }` `let elem = document.querySelector('#elem'); let style = getComputedStyle(elem); console.log('width: ' + style.width); // shows '200px' console.log('height: ' + style.height); // shows '200px'`

That is: it turns out that `getComputedStyle` ignores the block expanding and shows its dimensions as if this expanding did not exist. But that's not all: the presence or absence of a scrollbar also matters - some browsers subtract the width of the scrollbar from the width calculated via `getComputedStyle`, and some don't. In general, everything here is generally not cross-browser and it’s better not to use `getComputedStyle` to determine the width and height, but to use the metrics that we will study below.

## Computed values

There is one more nuance: if the width is set in `%`, then after running `getComputedStyle` we will see it in `px`. That is, in fact, we get not a given width, but a calculated one. See the following example:

`<div id="elem">text</div>` `#elem { width: 30%; /* width is set in % */ height: 200px; padding: 30px; border: 20px solid #BCBCBC; overflow: auto; }` `let elem = document.querySelector('#elem'); let style = getComputedStyle(elem); console.log('width: ' + style.width); // outputs the width in px`

## See also

- the `cssText` property
  that sets CSS styles in bulk

← →
↑
en ru