Retrouver les propriétés CSS d'un élement à l'aide de Javascript

23 aout 2016 / Marouen Mhiri / Javascript

Vanilla JS nous offre déjà la possibilité de retrouver les propriétés CSS d'un Element en utilisant le propriété "style". Celle-ci nous permet non seulement de retrouver le CSS mais aussi de l'ajouter ("get" et "set").

					
var element = document.getElementById('#mon-element');

// Définir la couleur pour cet élement
element.style.color = 'red';

// Retrouver la hauteur de cet élément 
var color = element.style.height;
					
				

Le problem avec "style" est que ça nous donne des informations que sur les propriétés inline du CSS.

Voyons l'exemple suivant:

					
...
<head>
    ...
    <style>
        #box {
            height: 200px;
        }
    </style>
</head>
<body>
    ...
    <div id="box" style="color: red;">
        <!-- Contenu de box -->
    </div>
    ...
<body>
					
				

Dans ce cas on a définit la couleur de l'élément "box" comme étant une propriété insérée (inline - sous l'attribut style).

Maintenant si on essaye de voir la valeur de la hauteur de "box" en utilisant: document.getElementById('#box').style.height on va recevoir la valeur null. Ceci est du à ce que la propriété height n'est pas une propriété insérée (inline).

Pour ceci Vanilla JS nous offre une autre méthode qui nous permet de retrouver (mais seulement retrouver - pas écrire) toutes les propriétés CSS que possède un élément même si on n'a pas spécifié de CSS pour l'élément.
Au fait ce sont les propriétés que le navigateur calcule pour l'élément en question.
Cette méthode s'appelle getComputedStyle et voici comment l'utiliser:

					
var element = document.getElementById('box');
var styles = window.getComputedStyle(element); // ceci nous donne une liste de toutes les propriétés CSS de "element"
					
				

si on veut voir quelle valeur a la propriété color, il suffit d'écrire:

					
var element = document.getElementById('box');
var couleur = window.getComputedStyle(element).color; // la couleur de "element"
					
				

si on veut voir quelle valeur a la propriété height, il suffit d'écrire:

					
var element = document.getElementById('box');
var hauteur = window.getComputedStyle(element).height; // la hauteur de "element"
					
				

Tags :

javascript