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.
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;
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:
-
.offsetHeight: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight -
.offsetWidth: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth -
.getBoundingClientRect(): https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
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();
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
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.
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.
é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.
... 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>
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
vous pouvez aussi utiliser ce code:
var divID = document.getElementById("divid");
var h = divID.style.pixelHeight;
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 {
}
}
}
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)