Comment récupérer la largeur et la hauteur réelles d'un élément HTML ?

Supposons que j'ai un élément " div&gt " que je souhaite centrer dans l'affichage du navigateur (viewport). Pour ce faire, je dois calculer la largeur et la hauteur de l'élément <div>.

Que dois-je utiliser ? Veuillez inclure des informations sur la compatibilité des navigateurs.

Zach Lysobey
Question modifiée 17 juin 2016 в 5:52
Programmation
xhtml javascript html dhtml
16 novembre 2008 в 7:15
18 vues
Solution

Vous devez utiliser les propriétés .offsetWidth et .offsetHeight. Notez qu'elles appartiennent à l'élément, et non à .style.

var width = document.getElementById('foo').offsetWidth;

Commentaires (11)

NOTE : *Cette réponse a été écrite en 2008. À l'époque, la meilleure solution inter-navigateurs pour la plupart des gens était vraiment d'utiliser jQuery. Je laisse la réponse ici pour la postérité et, si vous utilisez jQuery, c'est une bonne façon de procéder. Si vous utilisez un autre framework ou du JavaScript pur, la réponse acceptée est probablement la meilleure solution.

Depuis la version 1.2.6 de jQuery, vous pouvez utiliser l'une des principales [fonctions CSS][1], height et width (ou outerHeight et outerWidth, selon le cas).

var height = $("#myDiv").height();
var width = $("#myDiv").width();

var docHeight = $(document).height();
var docWidth = $(document).width();

[1] : http://api.jquery.com/category/css/ [2] : http://brandonaaron.net/docs/dimensions/

tvanfosson
Réponse modifiée 22 janvier 2016 в 5:03
Commentaires (0)

element.offsetWidth et element.offsetHeight devraient suffire, comme suggéré dans le message précédent.

Cependant, si vous souhaitez simplement centrer le contenu, il existe un meilleur moyen de le faire. En supposant que vous utilisez xhtml strict DOCTYPE, définissez la propriété margin:0,auto et la largeur requise en px à la balise body. Le contenu est aligné au centre de la page.

Commentaires (1)