Comment récupérer la hauteur et la largeur réelles d'un élément HTML?
Supposons que j'ai un <div> que je souhaite centrer dans l'affichage du navigateur (fenêtre d'affichage). Pour ce faire, je dois calculer la largeur et la hauteur de l'élément <div>.
Que devrais-je utiliser? Veuillez inclure des informations sur la compatibilité du navigateur.
Vous devez utiliser les propriétés .offsetWidth et .offsetHeight. Notez qu'ils appartiennent à l'élément et non pas à .style.
var width = document.getElementById('foo').offsetWidth;
Jetez un oeil à Element.getBoundingClientRect() .
Cette méthode retournera un objet contenant la 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_ retournent parfois _0_ (comme indiqué dans le commentaires ici )
Une autre différence est getBoundingClientRect() peut renvoyer des pixels fractionnaires, où _.offsetWidth_ et _.offsetHeight_ seront arrondis à l'entier le plus proche.
IE8 Remarque : getBoundingClientRect ne renvoie pas la hauteur et la largeur sur IE8 et plus bas.*
Si vous devez prendre en charge IE8, utilisez _.offsetWidth_ et _.offsetHeight_:
_var height = element.offsetHeight;
var width = element.offsetWidth;
_Cela vaut la peine de noter que l’objet renvoyé par cette méthode n’est pas vraiment un objet normal . Ses propriétés ne sont pas enumerable (ainsi, par exemple, _Object.keys_ ne fonctionne pas immédiatement.)
Plus d'informations à ce sujet ici: Comment convertir au mieux un ClientRect/DomRect en un objet simple
Référence:
NOTE: cette réponse a été écrite en 2008. À l'époque, la meilleure solution multi-navigateur pour la plupart des gens était vraiment utiliser jQuery. Je laisse la réponse ici à la postérité et, si vous utilisez jQuery, c'est une bonne façon de le faire. Si vous utilisez un autre framework ou du JavaScript pur, la réponse acceptée est probablement la solution.
À partir de jQuery 1.2.6, vous pouvez utiliser l’un des éléments principaux 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();
Juste au cas où cela serait utile à tout le monde, je mets une zone 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
Selon MDN: Détermination des dimensions des éléments
offsetWidth et offsetHeight renvoient la "quantité totale d'espace occupé 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 non la bordure, les marges ou les barres de défilement"
scrollWidth et scrollHeight renvoient la "taille réelle du contenu, quelle que soit la quantité actuellement visible"
Donc, cela dépend si le contenu mesuré est censé être en dehors de la zone visualisable actuelle.
Vous devez uniquement le calculer pour IE7 et les versions antérieures (et uniquement 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 le rétrécit à la taille de son contenu.
Il est facile de modifier les styles des éléments mais un peu délicat de lire la valeur.
JavaScript ne peut lire aucune propriété de style d'élément (elem.style) provenant de css (interne/externe) à moins que vous n'utilisiez l'appel de méthode intégrée getComputedStyle en javascript.
getComputedStyle (element [ pseudo])
Element: L'élément pour lequel lire la valeur.
pseudo: Un pseudo-élément si nécessaire, par exemple :: before. 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 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, soit width/height 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 en CSS:
Une valeur de style calculée est la valeur après que toutes les règles CSS et l'héritage CSS ont été appliqués, à la suite de la cascade CSS. Cela peut ressembler à hauteur: 1em ou taille de la police: 125%.
Une valeur de style résolue est celle finalement appliquée à l'élément. Des valeurs comme 1em ou 125% sont relatives. Le navigateur prend la valeur calculée et rend toutes les unités fixes et absolues, par exemple: height: 20px ou font-size: 16px. Pour les propriétés de géométrie, les valeurs résolues peuvent avoir un point flottant, tel que width: 50.5px.
Il y a longtemps que getComputedStyle a été créé pour obtenir les valeurs calculées, mais il s'est avéré que les valeurs résolues sont beaucoup plus pratiques et que la norme a été modifiée.
Donc, de nos jours, getComputedStyle renvoie la valeur résolue de la propriété.
Remarque:
getComputedStyle requiert le nom complet de la propriété
Vous devez toujours demander la propriété exacte souhaitée, telle que paddingLeft ou height ou width. Sinon, le résultat correct n'est pas garanti.
Par exemple, s'il existe des propriétés paddingLeft/paddingTop, que devrions-nous obtenir pour getComputedStyle (elem) .padding? Rien, ou peut-être une valeur "générée" à partir de rembourrages connus? Il n’ya pas de règle standard ici.
Il existe d'autres incohérences. Par exemple, certains navigateurs (Chrome) affichent 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
... semble que CSS aide à mettre la 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>
element.offsetWidth et element.offsetHeight devraient faire, comme suggéré dans le post précédent.
Toutefois, si vous souhaitez simplement centrer le contenu, il existe un meilleur moyen de le faire. En supposant que vous utilisiez xhtml strict DOCTYPE. définissez la marge: 0, la propriété auto et la largeur requise en px sur la balise body. Le contenu est centré sur la page.
si vous devez le centrer dans le port d'affichage du navigateur; vous pouvez y arriver avec CSS seulement
yourSelector {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
aussi vous pouvez utiliser ce code:
var divID = document.getElementById("divid");
var h = divID.style.pixelHeight;