Récupérer les propriétés CSS

La fonction getComputedStyle()

Comme vous avez pu le constater, il n'est pas possible de récupérer les valeurs des propriétés CSS d'un élément par le biais de la propriété style vu que celle-ci n'intègre pas les propriétés CSS des feuilles de style, ce qui nous limite énormément dans nos possibilités d'analyse… Heureusement, il existe une fonction permettant de remédier à ce problème : getComputedStyle() !

Cette fonction va se charger de récupérer, à notre place, la valeur de n'importe quel style CSS ! Qu'il soit déclaré dans la propriété style, une feuille de style ou bien même encore calculé automatiquement, cela importe peu : getComputedStyle() la récupérera sans problème.

Son fonctionnement est très simple et se fait de cette manière :

#text {

color: red;

}

</style>

var text = document.getElementById('text'),

color = getComputedStyle(text, null).color;

alert(color);

</script>

À quoi sert ce deuxième argument que vous avez mis à null ?

Il s'agit en fait d'un argument facultatif qui permet de spécifier une pseudo-classe à notre élément, nous n'allons cependant pas nous y attarder plus longtemps car nous ne nous en servirons pas. En effet, Internet Explorer (versions antérieures à la version 9) ne supporte pas l'utilisation de la fonction getComputedStyle() et utilise à la place la propriété currentStyle qui, elle, ne supporte pas l'utilisation des pseudo-classes.

N'y a-t-il rien qui vous choque dans le précédent paragraphe ? Il a été dit qu'il s'agissait d'un argument facultatif alors que pourtant on l'a spécifié ! Il ne s'agit pas d'une erreur de notre part, mais c'est tout simplement parce que cette fois c'est Firefox qui nous embête : il considère cet argument comme étant obligatoire. Ce comportement perdure jusqu'à la version 4 de Firefox.

La solution currentStyle pour Internet Explorer 8 et antérieures

Pour Internet Explorer, il existe encore une petite différence car la fonction getComputedStyle() n'existe pas ! À la place nous allons donc nous servir de currentStyle :

#text {

color: red;

}

</style>

var text = document.getElementById('text'),

color = text.currentStyle.color;

alert(color);

</script>

Pas bien compliqué n'est-ce pas ?

Toutes les valeurs obtenues par le biais de getComputedStyle() ou currentStyle sont en lecture seule !

Les propriétés de type offset

Certaines valeurs de positionnement ou de taille des éléments ne pourront pas être obtenues de façon simple avec getComputedStyle(), pour pallier ce problème il existe les propriétés offset qui sont, dans notre cas, au nombre de cinq :

Nom de l'attribut	Contient…
offsetWidth	Contient la largeur complète (width + padding + border) de l'élément.
offsetHeight	Contient la hauteur complète (height + padding + border) de l'élément.
offsetLeft	Surtout utile pour les éléments en position absolue. Contient la position de l'élément par rapport au bord gauche de son élément parent.
offsetTop	Surtout utile pour les éléments en position absolue. Contient la position de l'élément par rapport au bord supérieur de son élément parent.
offsetParent	Utile que pour un élément en position absolue ou relative ! Contient l'objet de l'élément parent par rapport auquel est positionné l'élément actuel.

Leur utilisation ne se fait pas de la même manière que n'importe quel style CSS, tout d'abord parce que ce ne sont pas des styles CSS ! Ce sont juste des propriétés (en lecture seule) mises à jour dynamiquement qui concernent certains états physiques d'un élément.

Pour les utiliser, on oublie la propriété style vu qu'il ne s'agit pas de styles CSS et on les lit directement sur l'objet de notre élément HTML :

alert(el.offsetHeight); // On affiche la hauteur complète de notre élément HTML

Faites bien attention : les valeurs contenues dans ces propriétés (à part offsetParent) sont exprimées en pixels et sont donc de type Number, pas comme les styles CSS qui sont de type Stringet pour lesquelles les unités sont explicitement spécifiées (px, cm, em, etc.).

La propriété offsetParent

Concernant la propriété offsetParent, elle contient l'objet de l'élément parent par rapport auquel est positionné votre élément actuel. C'est bien, mais qu'est-ce que ça veut dire ?

Ce que nous allons vous expliquer concerne des connaissances en HTML et en CSS et non pas en Javascript ! Seulement, il est fort possible que certains d'entre vous ne connaissent pas ce fonctionnement particulier du positionnement absolu, nous préférons donc vous le rappeler.

Lorsque vous décidez de mettre un de vos éléments HTML en positionnement absolu, celui-ci est sorti du positionnement par défaut des éléments HTML et va aller se placer tout en haut à gauche de votre page Web, par-dessus tous les autres éléments. Seulement, ce principe n'est applicable que lorsque votre élément n'est pas déjà lui-même placé dans un élément en positionnement absolu. Si cela arrive, alors votre élément se positionnera non plus par rapport au coin supérieur gauche de la page Web, mais par rapport au coin supérieur gauche du précédent élément placé en positionnement absolu, relatif ou fixe.

Ce système de positionnement est clair ? Bon, nous pouvons alors revenir à notre propriété offsetParent ! Si elle existe, c'est parce que les propriétés offsetTop et offsetLeft contiennent le positionnement de votre élément par rapport à son précédent élément parent et non pas par rapport à la page ! Si nous voulons obtenir son positionnement par rapport à la page, il faudra alors aussi ajouter les valeurs de positionnement de son (ses) élément(s) parent(s).

Voici le problème mis en pratique ainsi que sa solution :

#parent, #child {

position: absolute;

top: 50px; left: 100px;

}

#parent {

width: 200px; height: 200px;

background-color: blue;

}

#child {

width: 50px; height: 50px;

background-color: red;

}

</style>

</div>

var parent = document.getElementById('parent');

var child = document.getElementById('child');

alert("Sans la fonction de calcul, la position de l'élément enfant est : \n\n" +

'offsetTop : ' + child.offsetTop + 'px\n' +

'offsetLeft : ' + child.offsetLeft + 'px');

function getOffset(element) { // Notre fonction qui calcule le positionnement complet

var top = 0, left = 0;

do {

top += element.offsetTop;

left += element.offsetLeft;

} while (element = element.offsetParent); // Tant que « element » reçoit un « offsetParent » valide alors on additionne les valeurs des offsets

return { // On retourne un objet, cela nous permet de retourner les deux valeurs calculées

top: top,

left: left

};

}

alert("Avec la fonction de calcul, la position de l'élément enfant est : \n\n" +

'offsetTop : ' + getOffset(child).top + 'px\n' +

'offsetLeft : ' + getOffset(child).left + 'px');

</script>

Comme vous pouvez le constater, les valeurs seules de positionnement de notre élément enfant ne sont pas correctes si nous souhaitons connaître son positionnement par rapport à la page et non pas par rapport à l'élément parent. Nous sommes finalement obligés de créer une fonction pour calculer le positionnement par rapport à la page.

Concernant cette fonction, nous allons insister sur la boucle qu'elle contient car il est probable que le principe ne soit pas clair pour vous :

do {

top += element.offsetTop;

left += element.offsetLeft;

} while (element = element.offsetParent);

Si on utilise ce code HTML :

<body>

</div>

</body>

son schéma de fonctionnement sera le suivant pour le calcul des valeurs de positionnement de l'élément#child :

La boucle s'exécute une première fois en ajoutant les valeurs de positionnement de l'élément #child à nos deux variables top et left. Le calcul effectué est donc :

top = 0 + 100; // 100

left = 0 + 100; // 100

Ligne 4, on attribue à element l'objet de l'élément parent de #child. En gros, on monte d'un cran dans l'arbre DOM. L'opération est donc la suivante :

element = child.offsetParent; // Le nouvel élément est « parent »

Toujours ligne 4, element possède une référence vers un objet valide (qui est l'élément #parent), la condition est donc vérifiée (l'objet est évalué à true) et la boucle s'exécute de nouveau.
La boucle se répète en ajoutant cette fois les valeurs de positionnement de l'élément #parent à nos variables top et left. Le calcul effectué est donc :

top = 100 + 200; // 300

left = 100 + 200; // 300

Ligne 4, cette fois l'objet parent de #parent est l'élément <body>. La boucle va donc se répéter avec<body> qui est un objet valide. Comme nous n'avons pas touché à ses styles CSS il ne possède pas de valeurs de positionnement, le calcul effectué est donc :

top = 300 + 0; // 300

left = 300 + 0; // 300

Ligne 4, <body> a une propriété offsetParent qui est à undefined, la boucle s'arrête donc.

Voilà tout pour cette boucle ! Son fonctionnement n'est pas bien compliqué mais peut en dérouter certains, c'est pourquoi il valait mieux vous l'expliquer en détail.

Avant de terminer : pourquoi avoir écrit « hauteur complète (width + padding + border) » dans le tableau ? Qu'est-ce que ça veut dire ?

Il faut savoir qu'en HTML, la largeur (ou hauteur) complète d'un élément correspond à la valeur de width + celle du padding + celle des bordures.

Par exemple, sur ce code :

#offsetTest {

width: 100px; height: 100px;

padding: 10px;

border: 2px solid black;

}

</style>

la largeur complète de notre élément <div> vaut : 100 (width) + 10 (padding-left) + 10 (padding-right) + 2 (border-left) + 2 (border-right) = 124px.

Et il s'agit bien de la valeur retournée par offsetWidth :

var offsetTest = document.getElementById('offsetTest');

alert(offsetTest.offsetWidth);

Créé avec HelpNDoc Personal Edition: Création d'aide CHM, PDF, DOC et HTML d'une même source