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


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

Que devrais-je utiliser? S'il vous plaît inclure des informations sur la compatibilité du navigateur.


631
2017-11-16 19:15


origine


Réponses:


Vous devriez utiliser le .offsetWidth et .offsetHeight Propriétés. Notez qu'ils appartiennent à l'élément, pas .style.

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


959
2017-11-16 19:35



Jeter un coup d'œil à Element.getBoundingClientRect().

Cette méthode retournera un objet contenant le width, heightet quelques autres valeurs utiles:

{
    width: 960,
    height: 71,
    top: 603,
    bottom: 674,
    left: 360,
    right: 1320
}

Par exemple:

var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;

Je crois que cela n'a pas les problèmes .offsetWidth et .offsetHeight faire où ils reviennent parfois 0 (comme discuté dans le commentaires ici)

Une autre différence est getBoundingClientRect() peut renvoyer des pixels fractionnaires, où .offsetWidth et .offsetHeight arrondira à l'entier le plus proche.

Note IE8: getBoundingClientRect ne retourne pas la hauteur et la largeur sur IE8 et plus bas.*

Si vous doit soutenir IE8, utiliser .offsetWidth et .offsetHeight:

var height = element.offsetHeight;
var width = element.offsetWidth;

Il vaut la peine de noter que l'objet retourné par cette méthode n'est pas vraiment un Ordinaire objet. Ses propriétés ne sont pas énumérable (Ainsi, par exemple, Object.keys ne fonctionne pas out-of-the-box.)

Plus d'informations à ce sujet ici: Comment convertir un ClientRect / DomRect en un objet simple

Référence:


116
2017-09-18 18:37



REMARQUE: Cette réponse a été écrite en 2008. À l'époque, la meilleure solution pour tous les navigateurs était d'utiliser jQuery. Je laisse la réponse ici pour la postérité et, si vous utilisez jQuery, c'est un bon moyen de le faire. Si vous utilisez un autre framework ou du JavaScript pur, la réponse acceptée est probablement la voie à suivre.

À partir de jQuery 1.2.6, vous pouvez utiliser l'un des core Fonctions CSS, 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();

55
2017-11-16 19:29



Juste au cas où il serait utile à tout le monde, j'ai mis une boite de texte, un bouton et un div avec le même css:

width:200px;
height:20px;
border:solid 1px #000;
padding:2px;

<input id="t" type="text" />
<input id="b" type="button" />
<div   id="d"></div>

Je l'ai essayé en chrome, firefox et ie-edge, j'ai essayé avec jquery et sans, et je l'ai essayé avec et sans box-sizing:border-box. Toujours avec <!DOCTYPE html>

Les resultats:

                                                               Firefox       Chrome        IE-Edge    
                                                              with   w/o    with   w/o    with   w/o     box-sizing

$("#t").width()                                               194    200    194    200    194    200
$("#b").width()                                               194    194    194    194    194    194
$("#d").width()                                               194    200    194    200    194    200

$("#t").outerWidth()                                          200    206    200    206    200    206
$("#b").outerWidth()                                          200    200    200    200    200    200
$("#d").outerWidth()                                          200    206    200    206    200    206

$("#t").innerWidth()                                          198    204    198    204    198    204
$("#b").innerWidth()                                          198    198    198    198    198    198
$("#d").innerWidth()                                          198    204    198    204    198    204

$("#t").css('width')                                          200px  200px  200px  200px  200px  200px
$("#b").css('width')                                          200px  200px  200px  200px  200px  200px
$("#d").css('width')                                          200px  200px  200px  200px  200px  200px

$("#t").css('border-left-width')                              1px    1px    1px    1px    1px    1px
$("#b").css('border-left-width')                              1px    1px    1px    1px    1px    1px
$("#d").css('border-left-width')                              1px    1px    1px    1px    1px    1px

$("#t").css('padding-left')                                   2px    2px    2px    2px    2px    2px
$("#b").css('padding-left')                                   2px    2px    2px    2px    2px    2px
$("#d").css('padding-left')                                   2px    2px    2px    2px    2px    2px

document.getElementById("t").getBoundingClientRect().width    200    206    200    206    200    206
document.getElementById("b").getBoundingClientRect().width    200    200    200    200    200    200
document.getElementById("d").getBoundingClientRect().width    200    206    200    206    200    206

document.getElementById("t").offsetWidth                      200    206    200    206    200    206
document.getElementById("b").offsetWidth                      200    200    200    200    200    200
document.getElementById("d").offsetWidth                      200    206    200    206    200    206

28
2018-02-19 12:52



Vous avez seulement besoin de le calculer pour IE7 et plus anciens (et seulement si votre contenu n'a pas de taille fixe). Je suggère d'utiliser des commentaires conditionnels HTML pour limiter le piratage aux anciens IE qui ne supportent pas CSS2. Pour tous les autres navigateurs, utilisez ceci:

<style type="text/css">
    html,body {display:table; height:100%;width:100%;margin:0;padding:0;}
    body {display:table-cell; vertical-align:middle;}
    div {display:table; margin:0 auto; background:red;}
</style>
<body><div>test<br>test</div></body>

C'est la solution parfaite. Il centre <div> de toute taille, et rétrécit l'enveloppe à la taille de son contenu.


4
2017-11-16 20:57



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

Cependant, si vous voulez simplement centrer le contenu, il existe une meilleure façon de le faire. En supposant que vous utilisez xhtml DOCTYPE strict. définir la marge: 0, propriété auto et la largeur requise en px à l'étiquette du corps. Le contenu est aligné au centre de la page.


1
2017-11-16 19:50



... semble CSS aider à mettre div sur le centre ...

<style>
 .monitor {
 position:fixed;/* ... absolute possible if on :root */
 top:0;bottom:0;right:0;left:0;
 visibility:hidden;
 }
 .wrapper {
 width:200px;/* this is size range */
 height:100px;
 position:absolute;
 left:50%;top:50%;
 visibility:hidden;
 }

 .content {
 position:absolute;
 width: 100%;height:100%;
 left:-50%;top:-50%;
 visibility:visible;
 }

</style>

 <div class="monitor">
  <div class="wrapper">
   <div class="content">

 ... so you hav div 200px*100px on center ...

  </div>
 </div>
</div>

1
2018-03-01 00:21



Selon MDN: Détermination des dimensions des éléments

offsetWidth et offsetHeight renvoie la "quantité totale d'espace occupée par un élément, y compris la largeur du contenu visible, les barres de défilement (le cas échéant), le remplissage et la bordure"

clientWidth et clientHeight renvoie "l'espace occupé par le contenu affiché, y compris le remplissage, mais pas la bordure, les marges ou les barres de défilement"

scrollWidth et scrollHeight renvoie la "taille réelle du contenu, quelle que soit la quantité actuellement visible"

Cela dépend si le contenu mesuré doit être hors de la zone visible visible.


1
2018-03-01 20:38



Vous pouvez également utiliser ce code:

var divID = document.getElementById("divid");

var h = divID.style.pixelHeight;

0
2018-03-25 11:24



Il est facile de modifier les styles d'éléments mais il est difficile de lire la valeur.

JavaScript ne peut lire aucune propriété de style d'élément (elem.style) provenant de css (interne / externe) sauf si vous utilisez l'appel de méthode intégré getComputedStyle en javascript.

getComputedStyle (élément [, pseudo])

Élément: L'élément pour lire la valeur pour.
pseudo: Un pseudo-élément si nécessaire, par exemple :: before. Une chaîne vide ou sans argument signifie l'élément lui-même.

Le résultat est un objet avec des propriétés de style, comme elem.style, mais maintenant par rapport à toutes les classes css.

Par exemple, ici le style ne voit pas la marge:

<head>
  <style> body { color: red; margin: 5px } </style>
</head>
<body>

  <script>
    let computedStyle = getComputedStyle(document.body);

    // now we can read the margin and the color from it

    alert( computedStyle.marginTop ); // 5px
    alert( computedStyle.color ); // rgb(255, 0, 0)
  </script>

</body>

Donc modifié votre code javaScript pour inclure le getComputedStyle de l'élément que vous souhaitez obtenir sa largeur / hauteur ou un autre attribut

window.onload = function() {

    var test = document.getElementById("test");
    test.addEventListener("click", select);


    function select(e) {                                  
        var elementID = e.target.id;
        var element = document.getElementById(elementID);
        let computedStyle = getComputedStyle(element);
        var width = computedStyle.width;
        console.log(element);
        console.log(width);
    }

}

Valeurs calculées et résolues

Il y a deux concepts dans CSS:

Une valeur de style calculée est la valeur après toutes les règles CSS et CSS   l'héritage est appliqué, comme le résultat de la cascade CSS. Ça peut regarder   comme hauteur: 1em ou taille de police: 125%.

Une valeur de style résolue est celle qui est finalement appliquée à l'élément.   Les valeurs comme 1em ou 125% sont relatives. Le navigateur prend le calcul   valeur et rend toutes les unités fixes et absolues, par exemple:   hauteur: 20px ou taille de police: 16px. Pour les propriétés de géométrie résolues   peut avoir un point flottant, comme la largeur: 50.5px.

Il y a longtemps, getComputedStyle a été créé pour obtenir des valeurs calculées, mais il s'est avéré que les valeurs résolues sont beaucoup plus pratiques et que la norme a changé.
Donc, de nos jours, getComputedStyle renvoie la valeur résolue de la propriété.

Notez s'il vous plaît:

getComputedStyle requiert le nom complet de la propriété

Vous devriez toujours demander la propriété exacte que vous voulez, comme   paddingLeft ou hauteur ou largeur. Sinon, le bon   le résultat n'est pas garanti.

Par exemple, s'il existe des propriétés paddingLeft / paddingTop, alors   que devrions-nous obtenir pour getComputedStyle (elem) .padding? Rien, ou   peut-être une valeur "générée" à partir de paddings connus? Il n'y a pas de norme   règle ici.

Il y a d'autres incohérences. A titre d'exemple, certains navigateurs (Chrome) montrent 10px dans le document ci-dessous, et certains d'entre eux (Firefox) - ne le font pas:

<style>
  body {
    margin: 30px;
    height: 900px;
  }
</style>
<script>
  let style = getComputedStyle(document.body);
  alert(style.margin); // empty string in Firefox
</script>

pour plus d'informations https://javascript.info/styles-and-classes


0
2018-04-27 11:58