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, je dois calculer la largeur et la hauteur de l'élément <div> .

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

654
demandé sur Zach Lysobey 2008-11-16 22:15:24

12 réponses

vous devez utiliser les propriétés .offsetWidth et .offsetHeight . Notez qu'ils appartiennent à l'élément, pas .style .

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

993
répondu Greg 2008-11-16 19:35:11

regardez Element.getBoundingClientRect() .

cette méthode retournera un objet contenant les valeurs width , height , et 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 que .offsetWidth et .offsetHeight font où ils retournent parfois 0 (comme discuté dans le commentaires ici"" )

une autre différence est getBoundingClientRect() peut retourner des pixels fractionnels, où .offsetWidth et .offsetHeight arrondiront à l'entier le plus proche.

IE8 Note : getBoundingClientRect ne renvoie pas la hauteur et la largeur sur IE8 et au-dessous.*

Si vous doit support d'IE8, utiliser .offsetWidth et .offsetHeight :

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

Its intéressant de noter que l'Objet retourné par cette méthode n'est pas vraiment un normal objet. Ses propriétés ne sont pas énumérable (ainsi, par exemple, Object.keys ne fonctionne pas hors de la boîte.)

plus d'informations ici: la meilleure façon de convertir un ClientRect / DomRect en un objet simple

référence:

122
répondu Zach Lysobey 2018-04-15 21:21:05

NOTE : cette réponse a été écrite en 2008. À l'époque, la meilleure solution de Cross-browser 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 le faire. Si vous utilisez un autre cadre ou du JavaScript pur, la réponse acceptée est probablement la voie à suivre.

à partir de jQuery 1.2.6 vous pouvez utiliser l'une des fonctions de base 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();
56
répondu tvanfosson 2016-01-22 05:03:15

juste au cas où il est utile à quelqu'un, je mets une boîte de texte, bouton et div tous 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>

j'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 résultats:

                                                               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
30
répondu Graham 2016-02-19 12:52:13

vous avez seulement besoin de le calculer pour IE7 et plus vieux (et seulement si votre contenu n'a pas la taille fixe). Je suggère d'utiliser les commentaires conditionnels HTML pour limiter le piratage aux anciens systèmes 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 n'importe quelle taille, et l'enveloppe rétrécie à la taille de son contenu.

4
répondu Kornel 2008-11-16 20:57:23

selon MDN: détermination des dimensions des éléments

offsetWidth et offsetHeight retour "montant total de l'espace un élément occupe, y compris la largeur du contenu visible, les barres de défilement (le cas échéant), le remplissage et la frontière",

clientWidth et clientHeight retour "de combien d'espace le réel contenu affiché, y compris rembourrage, mais pas y compris à la frontière, les marges ou les barres de défilement"

scrollWidth et scrollHeight retour "taille réelle du contenu, peu importe combien il est actuellement visible"

donc cela dépend si le contenu mesuré est censé être hors de la zone visible actuelle.

3
répondu HarlemSquirrel 2018-04-04 18:51:49

élément.offsetWidth et element.offsethethight devrait faire, comme suggéré dans le post précédent.

Cependant, si vous voulez juste pour centrer le contenu, il ya une meilleure façon de le faire. En supposant que vous utilisez XHTML strict DOCTYPE. définissez la marge: 0, la propriété auto et la largeur requise dans px à la balise body. Le contenu est centre aligné à la page.

1
répondu questzen 2008-11-16 19:50:32

... on dirait que la CSS aide à mettre div au 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
répondu sanecin 2012-03-01 01:30:01

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

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

getComputedStyle(élément de [pseudo])

Élément: L'élément de lire la valeur.

pseudo: Un pseudo-élément si nécessaire, par exemple ::avant. Une chaîne vide ou aucun 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, avec le respect de toutes les classes css.

par exemple, ici 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>

a donc modifié votre code javaScript pour inclure le getComputedStyle de l'élément que vous souhaitez pour obtenir c'est largeur / hauteur ou 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. Il peut regarder comme hauteur:1em ou font-size: 125%.

une valeur de style résolu est celle finalement appliquée à l'élément. Des valeurs comme 1em ou 125% sont relatives. Le navigateur prend le calculées valeur et rend toutes les unités fixes et absolues, par exemple: taille: 20px ou font-size: 16px. Pour les propriétés de géométrie valeurs résolues peut avoir une pointe flottante, comme la largeur: 50,5 px.

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 la norme a changé.

Donc aujourd'hui getComputedStyle retourne réellement la valeur résolue de la propriété.

S'Il Vous Plaît Note:

getComputedStyle exige la pleine propriété nom

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

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

il y a d'autres incohérences. Par exemple, certains navigateurs (Chrome) afficher 10px dans le document ci – dessous, et certains d'entre eux (Firefox) - ne pas:

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

pour plus information https://javascript.info/styles-and-classes

1
répondu Lekens 2018-04-27 11:58:34

vous pouvez aussi utiliser ce code:

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

var h = divID.style.pixelHeight;
0
répondu Sergio 2014-06-08 16:21:18

voici le code pour WKWebView ce qui détermine une hauteur D'élément Dom spécifique (ne fonctionne pas correctement pour une page entière)

let html = "<body><span id=\"spanEl\" style=\"font-family: '\(taskFont.fontName)'; font-size: \(taskFont.pointSize - 4.0)pt; color: rgb(\(red), \(blue), \(green))\">\(textValue)</span></body>"
webView.navigationDelegate = self
webView.loadHTMLString(taskHTML, baseURL: nil)

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.evaluateJavaScript("document.getElementById(\"spanEl\").getBoundingClientRect().height;") { [weak self] (response, error) in
        if let nValue = response as? NSNumber {

        }
    }
}
0
répondu Aleksey Mazurenko 2018-05-31 11:52:38

si offsetWidth retourne 0, Vous pouvez obtenir la propriété style width de l'élément et la rechercher pour un nombre. "100px" - > 100

/\d*/.exec (MyElement.style.la largeur)

-3
répondu Arko 2015-03-04 14:12:30