Méthode multi-navigateur pour obtenir la largeur et la hauteur d’une DIV?

Ceci est mon premier post, alors allez-y doucement sur moi. Je suis sûr que je fais tout faux. Cependant, je n’ai trouvé aucun article répondant à la question ci-dessus.

J’utilise jQuery. J’essaie de trouver un moyen d’obtenir la largeur et la hauteur actuelles d’un élément DIV, même s’ils sont réglés sur “auto”. J’ai trouvé plusieurs façons de le faire, mais aucune méthode ne renvoie la même largeur dans IE. Il est important que cette méthode utilise plusieurs navigateurs, car la présentation de la page sera cassée si différents numéros sont renvoyés dans différents navigateurs.

Les options .width () et .height () ne fonctionnent pas car, dans IE, le remplissage est soustrait (par exemple, width () renvoie 25, la largeur étant de 30 et le remplissage de 5).

.outerWidth () et .outerHeight () ne sont pas cohérents non plus. Bien qu’ils travaillent avec IE (croyez-le ou non) en FF, le remplissage est ajouté à la largeur totale (par exemple, outerWidth () renvoie 110 en FF où la largeur est de 100 pixels et le remplissage de 10 pixels).

Y a-t-il un moyen de sortir de ce gâchis sans écrire des vérifications de navigateur complexes? Merci!

Il me semble que vous devez append un DOCTYPE à votre page pour forcer IE en mode “conforme aux normes” plutôt qu’en “quirks”. Voir le mode Quirks et le mode ssortingct .

Voir aussi width() :

Comment la largeur est calculée

et outerWidth() :

Comment la largeur extérieure est calculée

Je ne sais pas si cela vous aidera, mais le fragment suivant définira la hauteur d’un élément interne de sorte qu’il remplisse complètement l’espace disponible. L’élément interne (e) peut être nested à n’importe quelle profondeur à l’intérieur d’un élément de référence (r) ayant une hauteur définie. Le fragment prend en compte les hauteurs de tous les frères et sœurs compris entre e et r. Les deux parameters peuvent être passés en tant qu’éléments DOM ou objects JQuery.

 var fit_v = function ( e, r, no_set ){ if (!e.jquery) e = $(e); if (!r.jquery) r = $(r); var h, s, b = 0, d = 0; for (var i = 0; i < r[0].childNodes.length; i++){ s = $(r[0].childNodes[i]) d += s.outerHeight(); d += Math.max(b,parseInt(s.css('margin-top'))); b = parseInt(s.css('margin-bottom')); } d += b; h = r.height() - d; if (!no_set) e.height(h); return h; };