Angenommen, ich habe eine <div> die ich in der Anzeige des Browsers (Viewport) zentrieren möchte. Zu diesem Zweck muss ich die Breite und Höhe des <div> Element.
Was soll ich verwenden? Bitte fügen Sie Informationen zur Browser-Kompatibilität bei.
Sie sollten die .offsetWidth y .offsetHeight Eigenschaften. Beachten Sie, dass sie zu dem Element gehören, nicht zu .style .
var width = document.getElementById('foo').offsetWidth;Le site .getBoundingClientRect() Funktion gibt die Abmessungen und die Position des Elements als Fließkommazahlen zurück, nachdem sie CSS-Transformationen durchgeführt hat.
> console.log(document.getElementById('foo').getBoundingClientRect())
DOMRect {
bottom: 177,
height: 54.7,
left: 278.5,
right: 909.5,
top: 122.3,
width: 631,
x: 278.5,
y: 122.3,
}
Vorsicht! offsetHeight/offsetWidth können 0 zurückgeben, wenn Sie kürzlich bestimmte DOM-Änderungen am Element vorgenommen haben. Möglicherweise müssen Sie diesen Code in einem setTimeout-Aufruf aufrufen, nachdem Sie das Element geändert haben.
Ich kann nicht genau sagen, warum offsetWidth gibt in meinem Fall 0 zurück, weil ich den Code ursprünglich nicht geschrieben habe, sondern innerhalb der onload Ereignis erhalte ich immer 0.
Werfen Sie einen Blick auf Element.getBoundingClientRect() .
Diese Methode gibt ein Objekt zurück, das die width , height und einige andere nützliche Werte:
{
width: 960,
height: 71,
top: 603,
bottom: 674,
left: 360,
right: 1320
}Zum Beispiel:
var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;Ich glaube, dass dies nicht die Probleme hat, die .offsetWidth y .offsetHeight tun, wohin sie manchmal zurückkehren 0 (wie im Abschnitt Kommentare hier )
Ein weiterer Unterschied ist getBoundingClientRect() kann Bruchteile von Pixeln zurückgeben, wobei .offsetWidth y .offsetHeight rundet auf die nächste Ganzzahl.
IE8 Hinweis : getBoundingClientRect gibt Höhe und Breite nicht zurück bei IE8 und darunter.*
Wenn Sie muss IE8 unterstützen, verwenden Sie .offsetWidth y .offsetHeight :
var height = element.offsetHeight;
var width = element.offsetWidth;Es ist erwähnenswert, dass das von dieser Methode zurückgegebene Objekt nicht wirklich ein normal Objekt. Seine Eigenschaften sind nicht aufzählbar (also zum Beispiel, Object.keys funktioniert nicht ohne weiteres).
Weitere Informationen hierzu finden Sie hier: Wie konvertiert man am besten ein ClientRect / DomRect in ein einfaches Objekt?
Referenz:
.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
ANMERKUNG : Diese Antwort wurde 2008 verfasst. Zu der Zeit war die beste Cross-Browser-Lösung für die meisten Menschen wirklich jQuery zu verwenden. Ich lasse die Antwort hier für die Nachwelt, und wenn Sie jQuery verwenden, ist dies ein guter Weg, um es zu tun. Wenn Sie ein anderes Framework oder reines JavaScript verwenden, ist die akzeptierte Antwort wahrscheinlich der richtige Weg.
Ab jQuery 1.2.6 können Sie eine der Kern CSS-Funktionen , height y width (oder outerHeight y outerWidth (je nach Fall).
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
Nur für den Fall, dass es für jemanden nützlich ist, habe ich ein Textfeld, eine Schaltfläche und ein div mit dem gleichen 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>Ich habe es in Chrome, Firefox und IE-Edge versucht, ich habe es mit und ohne Jquery versucht, und ich habe es mit und ohne box-sizing:border-box . Immer mit <!DOCTYPE html>
Die Ergebnisse:
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
Nur um das klarzustellen... macht irgendeiner dieser Browser irgendetwas anders als der andere? Ich kann keine Unterschiede feststellen... Außerdem stimme ich (noch) nicht ab, aber das tut nicht weh. realmente eine direkte Antwort auf die Frage, obwohl sie leicht dahingehend abgeändert werden könnte.
Es ging nicht darum, die Frage zu beantworten - sie wurde bereits beantwortet. Nur einige hilfreiche Informationen und ja, alle die wichtigsten neuesten Version Browser auf diese Werte zustimmen - was eine gute Sache ist.
Nun... wenn Ihre Absicht darin besteht no um die Frage zu beantworten, dann gehört das eigentlich nicht hierher (als "Antwort"). Ich würde in Erwägung ziehen, dies in eine externe Ressource zu stellen (vielleicht ein GitHub gist oder einen Blogbeitrag) und es in einem Kommentar zur ursprünglichen Frage oder einer der Antworten zu verlinken.
Selon MDN: Bestimmung der Abmessungen von Elementen
offsetWidth y offsetHeight Rückgabe des "gesamten Platzes, den ein Element einnimmt, einschließlich der Breite des sichtbaren Inhalts, der Bildlaufleisten (falls vorhanden), der Füllung und des Rahmens".
clientWidth y clientHeight return "wie viel Platz der tatsächlich angezeigte Inhalt einnimmt, einschließlich Polsterung, aber ohne Rahmen, Ränder oder Bildlaufleisten"
scrollWidth y scrollHeight Rückgabe der "tatsächlichen Größe des Inhalts, unabhängig davon, wie viel davon gerade sichtbar ist".
Es hängt also davon ab, ob der gemessene Inhalt außerhalb des aktuell sichtbaren Bereichs liegen soll.
Danke: Hier ist ein Artikel darüber javascripttutorial.net/javascript-dom/javascript-width-height
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
18 Stimmen
Beachten Sie, dass die Höhe eines Elements durch jede Methode hat immer eine Performance-Auswirkungen da er den Browser dazu bringt, die Position aller Elemente auf der Seite neu zu berechnen (Reflow). Vermeiden Sie es daher, dies zu oft zu tun. Zur Kasse diese Liste was für Dinge einen Reflow auslösen.