clientHeight / clientWidth renvoyant différentes valeurs sur différents navigateurs

Question

Les propriétés document.body.clientHeight et document.body.clientWidth renvoient des valeurs différentes sur IE7, IE8 et Firefox:

IE 8:

document.body.clientHeight : 704 
document.body.clientWidth  : 1148

IE 7:

document.body.clientHeight : 704 
document.body.clientWidth  : 1132

FireFox:

document.body.clientHeight : 620 
document.body.clientWidth  : 1152

Pourquoi cet écart existe-t-il?
Existe-t-il des propriétés équivalentes compatibles avec différents navigateurs (IE8, IE7, Firefox) sans utiliser jQuery?

Answer 1

Cela concerne le modèle de boîte du navigateur. Utilisez quelque chose comme jQuery ou une autre bibliothèque d'abstraction JavaScript pour normaliser le modèle DOM.

Answer 2

Paul A a raison sur la raison de la divergence, mais la solution proposée par Ngm est fausse (au sens de JQuery).

L'équivalent de clientHeight et de clientWidth dans jQuery (1.3) est

.

$(window).width(), $(window).height()

Answer 3

L'élément body prend la largeur disponible, qui correspond généralement à la fenêtre de votre navigateur. En tant que tel, il s'agira de dimensions différentes d'un navigateur à l'autre en raison des bordures en chrome du navigateur, des barres de défilement, de l'espace vertical occupée par les menus et ainsi de suite.

Le fait que les hauteurs varient également indique également que vous définissez la hauteur body / html sur 100% css, car la hauteur dépend généralement d'éléments situés à l'intérieur du corps ..

Sauf si vous définissez la largeur de l'élément body sur une valeur fixe via css ou une propriété de style, ses dimensions sont généralement modifiées selon les navigateurs / versions et même peut-être même en fonction des plugins installé pour le navigateur. Les valeurs constantes dans un tel cas sont davantage une exception à la règle ...

Lorsque vous appelez .clientWidth sur d'autres éléments ne prenant pas la largeur automatique de la fenêtre du navigateur, les éléments "width" + "padding" sont toujours renvoyés. Ainsi, une largeur de largeur 200 et un remplissage de 20 auront clientWidth = 240 (20 remplissage à gauche et à droite).

Cependant, la raison principale pour laquelle on invoquait clientWidth est précisément due aux divergences attendues dans les résultats. Si vous savez que vous obtiendrez une largeur constante et que la valeur est connue, l'appel de clientWidth est redondant ...

Answer 4

L'équivalent de offsetHeight et offsetWidth dans jQuery est $ (fenêtre) .width (), $ (fenêtre) .height () Ce n'est pas le clientHeight et le clientWidth

Answer 5

Element.clientWidth & amp; Element.clientHeight renvoyer la hauteur / largeur du contenu de cet élément en plus de tout remplissage applicable.

La mise en oeuvre de jQuery est la suivante: $ (cible) .outerWidth () & amp; $ (cible) .outerHeight ()

.clientWidth & amp; .clientHeight sont inclus dans la spécification du module d'affichage CSSOM, actuellement à l'étape de travail. Bien que les navigateurs modernes aient une implémentation cohérente de cette spécification, pour assurer des performances cohérentes sur toutes les plates-formes existantes, l'implémentation jQuery doit toujours être utilisée.

Informations complémentaires:

• https: //developer.mozilla [point] org / en-US / docs / Web / API / Element.clientWidth
• https: //developer.mozilla [point] org / en-US / docs / Web / API / Element.clientHeight

Answer 6

Pour résoudre mon problème avec clientHeight, j'ai utilisé le paramètre clientHight des contrôles firstChild. J'utilise IE 11 pour imprimer des étiquettes à partir d'une base de données et le clientHeight qui fonctionnait dans IE 8 renvoyait la hauteur 0 dans IE 11. J'ai trouvé une propriété dans ce contrôle qui était répertoriée comme étant firstChild et qui avait une propriété si clientHeight et qui avait réellement la hauteur que je cherchais. Ainsi, si votre contrôle renvoie une taille de client égale à 0, jetez un coup d'œil à la propriété de son premier enfant. Cela m'a aidé ...

Answer 7

J'ai eu un problème similaire - firefox a renvoyé la valeur correcte de obj.clientHeight mais c'est-à-dire qu'il ne l'a pas renvoyé. Il a renvoyé 0. Je l'ai changé en obj.offsetHeight et cela a fonctionné. On dirait qu’il ya un état qui a, par exemple, pour la hauteur du client - cela le rend douteux ...

Answer 8

Cela peut être causé par le bogue du modèle de boîte d'IE. Pour résoudre ce problème, vous pouvez utiliser le Hack Box Model .

Answer 9

Quelques informations supplémentaires pour la fenêtre du navigateur: http://www.w3schools.com/js/js_window.asp?output=print