Ahaha le titre tueur ^^

Ce soir, alors que je travaillais sur un ptit projet très intéressant, je me suis repenché sur un problème auquel je n'avais plus pensé depuis longtemps …

Le but, pouvant paraitre simple, était de récupérer la taille d'un bloc.
La propriété width ne nous dit rien même si on a donné directement l'attribut width à l'élément.

PS : quand je parle de width, il en va de même pour height

Il y a aussi la propriété style.width qui ici ne nous parle seulement si la propriété a été définie par le CSS (et non un attribut)

Mais ça ne fonctionne pas si la taille est un pourcentage, la raison a cela reste un mystère.

Enfin, il y a celle qu'on aurait pu croire être notre sauveuse: la propriété clientWidth qui nous donne la taille actuelle !
Fort pratique lorsqu'il s'agit du taille dynamique (en % par exemple) qui peut varier aux cours du temps.

Mais toujours pas moyen de récupérer la valeur de ce fameux pourcentage. Pourquoi est-ce si compliqué de récupérer une valeur pour laquelle Firefox (c'est le navigateur sous lequel je travaille, je ne sais pas si les autres ont le même comportement mais je suppose que oui, faites moi savoir ) à si facile de travailler avec (le redimensionnement est instantané etc). Notons tout de même que grâce à clientWidth il y a moyen de créer un écouteur d'évènement et à chaque redimensionnement du premier bloc, récupérer clientWidth et l'appliquer au bloc cible.
C'est lourd…

Alors j'ai cherché et la solution se trouve dans les recoins les plus sombres de la DOM (j'exagère mais bon vous allez devoir admettre que c'est tordu comme démarche alors que ça aurait pu être si simple à première vue). Et quand bien même vous trouvez manuellement la propriété qui vous intéressait, allez-y pour coder quelque chose de léger pour récupérer une valeur inconnue >.<

Enfaite il faut directement allez fouiner dans les déclarations CSS :/
Encore facile si vous n'en avez que très peu mais rapidement ça se complique car leur unique accès est numérique.
En gros vous devez vérifier chacune des déclarations CSS, une par une car vous ne pouvez pas demander donne moi la propriété lié à machin ou bidule. Ça serait trop beau

Les déclarations se trouvent ici document.styleSheets (c'est une liste) et sont séparées par feuilles (il est peut-être intéressant de remarquer qu'il y a une "fausse" feuille qui retient les définitions CSS qui ont été faites directement dans le fichier ou directement sur les éléments (si je ne me trompe pas))
Auxquelles il faut accéder à leur cssRules (c'est là qu'il faut toutes les parcourir afin de trouver celle qu'on cherche) puis enfin accéder à style puis width comme on l'aurait souhaité pour enfin récupérer ce fameux pourcentage x) comme ça on peut le transférer au bloc cible et tout se fait tout seul par la suite. Mais bon c'est bourrin et je me demande si c'est pas vraiment pire que la première solution

document.styleSheets[n].cssRules[m].style.width

(où vous devez trouvez n et m)

Surtout que je vous gardais un détail pour la fin, quand vous parcourrez toutes les déclarations CSS, là non plus ça ne vous est pas offert sur un plateau, pour chaque cssRules vous avez la propriété selectorText qui vous est donné de la sorte:

… cssRules[m].selectorText = "button#id a.class, img.class2"

Bref si vous avez pas compris il vous donne la régle de déclaration complète et ça serait à vous de faire en sorte de les vérifier, autant dire que c'est perdu d'avance sauf pour les définition simple du style

table{color:red}

Si vous connaissez une meilleure solution, je suis preneur ^^

Je voulais juste récupérer la taille en % que j'ai donné à un de mes conteneurs via css