11548 sujets

JavaScript, DOM et API Web HTML5

[résolu] Display:none = width:0px & height:0px

Salut à tous !

voila j'ai un petit probleme qui est le suivant : j'ai dans une page HTML un div qui n'est pas affiché grace à un display:none ;

Ce div contient des images de différentes tailles. Lorsque j'essaie de récupérer la taille de ces images via le DOM (document.images(i).offsetWidth par exemple), cela me renvoi 0px car le div qui les contient est en display:none;

J'aimerais donc savoir si quelqu'un a déjà rencontré ce probleme, et s'il sais comment faire pour récupérer les vraies dimensions de ces images.

La question en bref : comment faire pour récupérer les dimensions d'un objet caché grace à un display:none ?

Merci pour votre aide !

PS : message edité pour mettre document.images(i).offsetWidth à la place de document.images(I ENTRE CROCHETS).offsetWidth car le i entre crochet est le tag pour italique ... pas trés malin ca Smiley cligne
Modifié par AntiStatic (10 May 2005 - 10:52)
Dans ce cas je pense que j'emploierais sur ton <div>, à la place de
display: none

le code CSS suivant :
visibility: hidden; height: 0;

Il me semble que dans ce cas le navigateur interpète bien le contenu du <div>... avec un "dispay: none", il zappe complètement le contenu du <div>. J'ai déjà eu un problème similaire, résolu par la combinaison de "visibility: hidden" et "height: 0", éventuellement complété par un "width: 0".
En espérant que ça peut t'aider !
Effectivement j'avais déjà remarqué cette astuce. Je faisais meme plutot un visibility:hidden avec un position:absolute mais cela me posais des problemes car j'ai absolument besoin su display:none !

Mais bon j'ai contourné le probleme autrement car il semble bien qu'il soit impossible de récupérer les dimensions d'un objet, et de ses enfants, cachés via un display:none;

En fait la seule solution convenable que j'ai trouvé consiste à passer les width et height dans un style directement associé à l'objet. Par exemple :


<img src="labas" style="width:30px;height:30px" />


Merci pour ton aide en tout cas Smiley cligne
Tu ne peux effectivement pas accéder aux propriétés d'un élément enfant d'un contener en display:none.

Par contre tu peux modifier ce display:none en display:block, récupérer les propriétés et repasser en display:none.

Evidemment cette méthode dépends de la structure de ta page et du moment auquel tu fais jouer cette capture de propriétés.

L'autre solution consiste à ne pas utiliser de display:none mais à utiliser la technique de paul Bohman qui consiste à placer un élément en dehors de la zone de display.

De cette manière les éléments qui y sont contenus restent accessible par ecmascript.
A priori la méthode qui consiste a directement mettre les propriétés dans un style associé à l'objet convient mieux à ce que je veux faire !

Par contre c'est vrai que la méthode de Paul Bohman est sympa, merci pour le tuyau Smiley cligne

Bon aller on va dire que c'est résolu vu qu'il y a tout de meme des solutions pour contourner ce probleme !

Tks à tout les 2 !
Sujet clos
Aller à