Comment récupérer un élément HTML ' s réelles width et height ?

Question

Supposons que j’ai un que je souhaite centrer dans l’affichage du navigateur (viewport). Pour ce faire, j’ai besoin de calculer la largeur et la hauteur de la élément. Que dois-je utiliser pour compatibilité inter-navigateurs maximale ? Vous cherchez une solution qui fonctionne sous IE6 +, FF2 +, Opera et les navigateurs basés sur Webkit (Safari 3 +, Google Chrome).

Answer 1

Vous devez utiliser le et Propriétés. Remarque, ils appartiennent à l’élément, pas `` .

``

Answer 2

À partir de jQuery 1.2.6, vous pouvez utiliser une des principales fonctions CSS, et (ou et , selon le cas).

Answer 3

Il suffit de le calculer pour IE7 et plus âgés (et seulement si votre contenu n’a pas une taille fixe). Je suggère d’utiliser les commentaires conditionnels HTML pour limiter l’entaille pour IEs anciens qui ne supportent pas CSS2. Pour tous les autres navigateurs utiliser ceci :

C’est la solution parfaite. Il est centré `` de n’importe quelle taille et il shrink-wraps à la taille de son contenu.

Answer 4

element.offsetWidth et element.offsetHeight devraient faire, comme proposé dans le post précédent.

Toutefois, si vous voulez juste pour centrer le contenu, il y a une meilleure façon de le faire. En supposant que vous utilisez xhtml DOCTYPE strict. Affectez la margin : 0, auto et bonne largeur en px jusqu'à la balise body. Le contenu est centré sur la page.