[casse-tete (pour moi)] recuperer la largeur d'un <div>

Version imprimable

04/11/2004, 21h56
Invité

[casse-tete (pour moi)] recuperer la largeur d'un <div>

salut tout le monde !

voila, j'ai un <div> dont je connais la propriété style.left
dedans j'ai du texte qui peut etre dans n'importe quelle police et n'importe quelle taille.

je cherche la largeur de ce <div> :
- j'ai pensé multiplier la largeur des caracteres de la police par le nombre de caracteres, mais je n'arrive pas à connaitre la largeur des caracteres :(... ==> s'il y a un moyen, quel est-il :?:
- j'ai pensé passer par la propriete width de la balise directement, mais comme je ne le defini pas à l'avance, il me sort 'undefined' :(

d'autres idées :?:

salut,

moi j'ai ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
function look(){
var oX = document.getElementById('cont');
if( !oX ) { return false; }
var W = oX.clip ? oX.clip.width : oX.offsetWidth;
alert(W);
} 
</script>
</script>
</head>
<body>
<br>
<div id="cont" style="border:1px solid blue;" onClick="look();">
ici je vais mettre un peu de texte<br>
juste pour combler le vide du div<br>
</div>
</body>
</html>

mais vu que la largeur n'est pas definie , elle fait 100% de la page ...

j'espere que tu pourras tout de même en tirer quelque chose .

L.

05/11/2004, 00h23
Senoyed

Re: [casse-tete (pour moi)] recuperer la largeur d'un <di

Citation:

Envoyé par torvalds17

- j'ai pensé multiplier la largeur des caracteres de la police par le nombre de caracteres, mais je n'arrive pas à connaitre la largeur des caracteres :(... ==> s'il y a un moyen, quel est-il :?:

Tu ne peux pas connaître la largeur moyenne d'un caractère, sachant qu'un m est plus large qu'un i par exemple. La seule solution serait d'utiliser des polices à largeur fixe, ceci dit, même ainsi, ce serait du bricolage bon marché très peu fiable... Il y a une autre solution...

Citation:

Envoyé par torvalds17

- j'ai pensé passer par la propriete width de la balise directement, mais comme je ne le defini pas à l'avance, il me sort 'undefined' :(

La propriété width ne va pas en effet t'être d'un grand secours dans le cas d'une div dont la largeur n'est pas fixée à l'avance. Mais il y en a une qui répond exactement à tes besoins : offsetWidth.

Cette propriété JS te donne la largeur de ta div, scrollbar comprise si il y en a une. Si tu veux la largeur sans tenir compte de la scroolbar, utilise la propriété scrollWidth. Les résultats sont donnés en pixels (à confirmer).

Par contre, en ce qui concerne la compatibilité, je ne suis pas certain que ça passe sous tous les navigateurs. Je viens d'essayer avec IE 5 et Mozilla 1.6, ça passe. Mais il faudrait se renseigner sur les autres navigateurs. Si tu as des réponses à ce sujet, n'hésite pas à nous les communiquer.

Note : pour ceux que ça intéresse, on peut aussi récupérer les hauteurs grâce aux propriétés offsetHeight et scrollHeight
05/11/2004, 07h32
Invité

merci, offsetWidth fonctionne parafaitement (je precise juste, au cas où ça interesserait quelqu'un, que cette propriete ne fonctionne que si le style.disqplay du <div> n'est pas à 'none' :roll:).

ps : au niveau compatibilité, je m'en occuperai plus tard, car pour l'instant je ne teste mon script que sous FireFox, on verra le reste apres.

encore :merci:
05/11/2004, 07h39
leris

re,

offsetWidth fonctionne à peu pres sur tout .
(testé I.E, netsc.6 et 7 , firefox.0.9.2 , mozilla.1.0 , opera.7.54).

pas trouvé à qui s'adressait clip.width ... je l'ai laissé car je trouvais que ça faisait joli . :D

L.