javascript - page - width vs clientwidth




clientHeight/clientWidth renvoie différentes valeurs sur différents navigateurs (6)

Ce que j'ai fait pour résoudre mon problème avec clientHeight est d'utiliser le 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 de 0 dans IE 11. J'ai trouvé une propriété dans ce contrôle répertoriée comme firstChild et possédant une propriété si clientHeight la hauteur que je cherchais. Donc, si votre contrôle retourne un client, la taille de 0 examine la propriété de son firstChild. Ça m'a aidé...

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 cette différence existe-t-elle?
Existe-t-il des propriétés équivalentes cohérentes entre les différents navigateurs (IE8, IE7, Firefox) sans utiliser jQuery?


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


J'ai eu un problème similaire - firefox a retourné la valeur correcte de obj.clientHeight mais c'est-à-dire qu'il n'a pas retourné 0. Je l'ai changé en obj.offsetHeight et ça a fonctionné. Il semble qu'il y ait un état qui, par exemple, a un effet sur la clientèle - cela le rend difficile ...


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

Le fait que les hauteurs varient également me dit aussi que vous définissez la hauteur corps / html à 100% par le biais de css car la hauteur dépend généralement des éléments à l'intérieur du corps .

Sauf si vous définissez la largeur de l'élément body sur une valeur fixe via css ou s'il s'agit d'une propriété de style, ses dimensions varieront toujours entre les navigateurs / versions et peut-être même selon les plug-ins installés pour le navigateur. Les valeurs constantes dans un tel cas sont plus une exception à la règle ...

Lorsque vous appelez .clientWidth sur d'autres éléments qui ne prennent pas la largeur automatique de la fenêtre du navigateur, les éléments 'width' + 'padding' seront toujours renvoyés. Donc un div avec la largeur 200 et un padding de 20 aura clientWidth = 240 (20 padding à gauche et à droite).

La raison principale, cependant, pour laquelle on invoquerait clientWidth, est justement due aux possibles divergences attendues dans les résultats. Si vous savez que vous obtiendrez une largeur constante et que la valeur est connue, invoquer clientWidth est redondant ...


Paul A a raison de dire que la différence existe, mais la solution proposée par Ngm est fausse (au sens de JQuery).

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

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







internet-explorer-7