La fonction getComputedStyle

La fonction getComputedStyle permet d'obtenir la valeur de n'importe quelle propriété CSS d'un élément, même à partir d'un fichier CSS.

Syntaxe

let objet = getComputedStyle(élément);

Détails

Comment cela fonctionne (attention : pas comme nous l'attendons) : la fonction prend un élément en paramètre, et retourne un objet, qui contient en lui toutes les propriétés CSS de l'élément transmis. Mettons cet objet dans une variable style. Le nom est arbitraire, c'est simplement une variable - comme nous l'imaginerons, ainsi nous y ferons référence :

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // dans style se trouvent les propriétés CSS

Affichons, par exemple, la largeur. Cela se fait ainsi - style.width :

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.width);

Pour afficher, par exemple, le padding gauche - nous faisons ainsi - style.paddingLeft :

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

Dans l'exemple suivant, nous afficherons toutes les propriétés CSS qui nous intéressent pour notre élément :

<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); // affichera '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // affichera '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // affichera 'solid'

Imprécision de getComputedStyle

Parfois la fonction getComputedStyle fonctionne incorrectement avec la largeur et la hauteur. Cela est dû au fait que le padding et la bordure élargissent le bloc. Dans l'exemple suivant, une largeur de 200px est définie pour le bloc, ainsi qu'une bordure et un border. La largeur réelle du bloc est de 300px, mais getComputedStyle affichera quand même 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); // affichera '200px'
console.log('height: ' + style.height); // affichera '200px'

Autrement dit : il s'avère que getComputedStyle ignore l'élargissement du bloc et montre ses dimensions comme si cet élargissement n'existait pas. Mais ce n'est pas tout : la présence ou l'absence d'une barre de défilement a également de l'importance - certains navigateurs soustraient la largeur de la barre de défilement de la largeur calculée via getComputedStyle, et d'autres ne la soustraient pas. En bref, ici tout n'est pas cross-navigateur et il vaut mieux ne pas utiliser getComputedStyle pour déterminer la largeur et la hauteur, mais d'utiliser les métriques, que nous étudierons un peu plus bas.

Valeurs calculées

Il y a encore une nuance : si la largeur est définie en % - alors après le travail de getComputedStyle nous verrons sa valeur en px. C'est-à-dire qu'en réalité nous n'obtenons pas la largeur définie, mais la largeur calculée. Regardez l'exemple suivant :

<div id="elem">text</div>

#elem {
	width: 30%; /* largeur définie en % */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // affichera la largeur en px

Voir aussi

la propriété cssText,
qui définit massivement les styles CSS