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

getComputedStyle function

Syntax

Details

getComputedStyle inaccuracy

Computed values

See also