[truc] Javascript : conversion %/px

Il s'agit d'une parade. Peut-être que vous avez d'autre solutions, mais j'ai déjà fouillé pas mal sur le net.

Lorsque vous voulez convertir des % en px en javascript, la solution évidente serait de déterminer la taille de la partie affichable de la fenêtre et de faire un rapport. Mais voilà, la taille de la partie affichable fait partie des valeurs qui est difficilement accessible en JS. Plusieurs navigateurs ont un comportement différent dans ce domaine >.< . J'ai vu ici et là des fonctions JS qui par le biais de tests multiples arrivent à trouver une valeur, mais franchement rien de 100% sûr. Je vais vous avouer que ma méthode n'est p-e pas 100% sûr non-plus; Il faudrait tester en profondeur. Mais j'ai des bonnes raisons de croire qu'elle donne un résultat équivalent au autres valeurs en "%" du css ^^.

La solution est tout bête:
Quelque part dans l'html: (Mais obligatoirement à même le body)

Code:

---

<img id="echelle" style="width:1%;height:1%;position:absolute;top:0px;left:0px;Visibility: Hidden;" src="">

---

Non, vous ne rêvez pas : une image sans source et invisible en plus !

Proportion px/% en X dans le JS:

Code:

---

parseInt(document.getElementById("echelle").offsetWidth)

---

Proportion px/% en Y dans le JS:

Code:

---

parseInt(document.getElementById("echelle").offsetHeight)

---

NB: vous optenez ainsi la valeur en px de 1%, il suffit de multiplier par le nombre de % escompté.

J'espère être utile a quelqu'un. J'avoue que la solution est simple, mais je ne l'ai jamais vu ailleurs, alors je post 8-) .

Attention que % dépend de la taille du parent, pas de celle de la fenêtre :

Code:

---

<div style="width: 100px; background: green;"><div style="width: 10%; background: red"></div>

---

La meilleure solution est donc :

Code:

---

1 2 3 4 5

function percentToPx(percent,element,useWidthInstead) { if (!element) { element = document.body; } var hType = useWidthInstead?"offsetWidth":"offsetHeight"; return parseInt(percent * element[hType] / 100); }

---

Si je ne m'abuse la taille du body retourné peut être différente de celle de l'espace d'affichage puisqu'il peut faire plus d'une page (confirmé je vient de tester). Je me suis p-e mal exprimer, mais je cherche à établir la correspondance exact entre le "%" du CSS et une valeur JS.

J'ai oublier de préciser effectivement: l'image caché doit absolument être dans le body.

J'aurai mis une image de 1px par 1px, histoire d'être sûr que le navigateur ne va redimmensionner le contenu la balise parce qu'elle ne contient rien.


Si je ne me trompe pas dans certains cas (je crois que ça le fait pour les p, div et les td sous certains navigateurs), une balise vide prend des dimensions par défaut même si les attributs width et height sont définis.

Citation:

---

Envoyé par Auteur

Si je ne me trompe pas dans certains cas (je crois que ça le fait pour les p, div et les td sous certains navigateurs), une balise vide prend des dimensions par défaut même si les attributs width et height sont définis.

---

En gros :

Citation:

---

Ce problème survient quand vous avez spécifié une hauteur inférieure au line-height calculé du div. En effet, IE6 alloue automatiquement l'espace nécessaire à un texte éventuel.

Vu que le line-height est calculé à partir du font-size, on peut attribuer un font-size de 0 pour le div en question:

Code:

---

<div style="height:10px;font-size:0"></div>

---

Malgré un font-size de 0 il est impossible d'obtenir une hauteur de 1px sur IE6, ce que permet de faire la propriété overflow:

Code:

---

<div style="height:1px;overflow:hidden"></div>

---

---

J'ai effectivement tenter avec une DIV c'était foireux en effet, puis j'ai tenter avec une image. Ça fonctionnait bien avec tout les navigateurs que j'avais à ma disposition (je ne tient pas le registre complet de toutes les versions ;) ). À priori ça fait un transfert de fichier en moins (aussi petit soit-il). Donc, j'ai laisser la source en blanc. Comme je l'ai dit, il serait bien de tester en profondeur, mais jusqu'à présent cette trouvaille est mieux que rien. :roll: .

ça peut pas servir ça ?:
http://www.developpez.net/forums/sho...longueur+texte