Wie kann ich die tatsächliche Breite und Höhe eines HTML-Elements abrufen?
Nehme an, dass ich eine <div>
möchte ich center, in der browser-Anzeige (viewport). So zu tun, ich brauche zur Berechnung der Breite und Höhe des <div>
element.
Was sollte ich verwenden? Bitte auch Informationen über browser-Kompatibilität.
Kommentar zu dem Problem
Beachten Sie, dass immer ein element ist die Höhe, die durch die Methode immer ein Auswirkungen auf die Leistung es macht den browser neu berechnen die position aller Elemente auf der Seite (reflow). Deshalb, vermeiden Sie, es zu tun zu viel. Checkout dieser Liste für welche Art von Dinge, die trigger eine reflow.
InformationsquelleAutor der Frage snortasprocket | 2008-11-16
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sollten Sie die
.offsetWidth
und.offsetHeight
Eigenschaften.Hinweis: Sie gehören zu dem element, nicht
.style
.var width = document.getElementById('foo').offsetWidth;
InformationsquelleAutor der Antwort Greg
Werfen Sie einen Blick auf
- Element.getBoundingClientRect()
.Diese Methode gibt ein Objekt zurück mit den
width
,height
, und einige andere nützliche Werte:Beispiel:
Ich glaube, dass dies nicht die Probleme haben, dass
.offsetWidth
und.offsetHeight
tun, wo Sie manchmal zurück0
(wie besprochen, in der Kommentare hier)Weiterer Unterschied ist
getBoundingClientRect()
zurückkehren können gebrochene Pixel, wo.offsetWidth
und.offsetHeight
wird auf die nächste Ganzzahl gerundet.IE8 Hinweis:
getBoundingClientRect
nicht wieder die Höhe und die Breite auf IE8 und unten.*Wenn Sie muss - Unterstützung IE8, verwenden Sie
.offsetWidth
und.offsetHeight
:Ist es erwähnenswert, dass das Objekt von dieser Methode zurückgegeben werden, ist nicht wirklich ein normalen Objekt. Seine Eigenschaften sind nicht enumerable (also zum Beispiel
Object.keys
funktioniert nicht out-of-the-box.)Mehr Infos dazu hier:
Wie man Sie am besten konvertieren ClientRect /DomRect in einem einfachen 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/getBoundingClientRectInformationsquelleAutor der Antwort Zach Lysobey
HINWEIS: diese Antwort geschrieben wurde, im Jahr 2008. In der Zeit, die besten cross-browser-Lösung für die meisten Menschen war wirklich zu verwenden jQuery. Ich lasse die Antwort hier für die Nachwelt und die, wenn Sie mit jQuery sind, ist dies ein guter Weg, es zu tun. Wenn Sie mit einem anderen Rahmen oder Reine JavaScript-die akzeptierte Antwort ist wahrscheinlich der Weg zu gehen.
Ab jQuery 1.2.6 Sie können verwenden Sie eine der Kern -CSS-Funktionen,
height
undwidth
(oderouterHeight
undouterWidth
als geeignet).InformationsquelleAutor der Antwort tvanfosson
Nur für den Fall, es ist für jeden praktisch, ich habe eine textbox, button und div-alle mit dem gleichen css:
Versuchte ich es in chrome, firefox und ie-edge, ich habe versucht, mit jquery und ohne, und ich versuchte es mit und ohne
box-sizing:border-box
. Immer mit<!DOCTYPE html>
Die Ergebnisse:
InformationsquelleAutor der Antwort Graham
Brauchen Sie nur zu berechnen, es für IE7 und älter (und nur, wenn Ihre Inhalte nicht fixed size). Ich schlage vor, mit HTML conditional comments zu begrenzen hack zu alten IEs, die keine Unterstützung für CSS2. Für alle anderen Browser verwenden:
Ist dies die perfekte Lösung. Es dreht sich
<div>
jeder Größe und schrumpfen und wickelt es um die Größe seines Inhalts.InformationsquelleAutor der Antwort Kornel
element.offsetWidth und element.offsetHeight tun sollten, wie vorgeschlagen, im vorherigen post.
Jedoch, wenn Sie nur wollen, um die Mitte der Inhalt, es gibt einen besseren Weg, dies zu tun. Angenommen, Sie verwenden xhtml strict DOCTYPE. die margin:0,auto-Eigenschaft und der erforderlichen Breite in px an den body-tag. Der Inhalt wird zentriert ausgerichtet auf die Seite.
InformationsquelleAutor der Antwort questzen
... scheint CSS-Hilfe zu setzen div auf center ...
InformationsquelleAutor der Antwort sanecin
Laut MDN: Bestimmung der Dimensionen der Elemente
offsetWidth
undoffsetHeight
Gegenzug die "Gesamt-Menge der Raum, den ein element einnimmt, einschließlich der Breite des sichtbaren Inhalt, Bildlaufleisten (wenn überhaupt), padding und border"clientWidth
undclientHeight
return", wie viel Speicherplatz die tatsächliche Anzeige der Inhalte nimmt, einschließlich der Polsterung, aber nicht einschließlich der Grenze, Rand, oder scrollbars"scrollWidth
undscrollHeight
Gegenzug die "tatsächliche Größe des Inhalts, unabhängig davon, wie viel es aktuell sichtbar ist"Also es hängt davon ab, ob der gemessene Inhalt wird erwartet, dass aus dem aktuell sichtbaren Bereich.
InformationsquelleAutor der Antwort HarlemSquirrel
auch können Sie diesen code verwenden:
InformationsquelleAutor der Antwort
Ist es leicht zu ändern die Elemente, Stile, aber ein bisschen schwierig zu Lesen Sie den Wert ab.
JavaScript nicht Lesen können, jedes element style-Eigenschaft (elem.Stil), die von css(intern/extern), es sei denn, Sie verwenden die eingebaute Aufruf der Methode getComputedStyle in javascript.
Element: Das element, um Lesen Sie den Wert.
pseudo: Ein pseudo-element ist, wenn erforderlich, zum Beispiel ::vor. Eine leere Zeichenfolge oder kein argument bedeutet, dass das element selbst.
Das Ergebnis ist ein Objekt mit Stil-Eigenschaften, wie z.B. elem.Stil, aber jetzt mit Bezug auf alle css-Klassen.
Beispielsweise hier Stil nicht sieht, dass die Marge:
So verändert Sie Ihre javaScript-code, der getComputedStyle von dem element, das Sie wollen, um es für die Breite/Höhe oder andere Attribut
Berechnet und aufgelöst Werte
Gibt es zwei Konzepte in CSS:
Vor langer Zeit getComputedStyle wurde geschaffen, um zu erhalten, berechnete Werte, aber es stellte sich heraus, dass aufgelöst Werte sind viel bequemer, und die Norm geändert werden.
So heute getComputedStyle tatsächlich gibt die gelöst Wert der Immobilie.
Bitte Beachten Sie:
getComputedStyle erfordert den Namen der Eigenschaft
Es gibt andere Unstimmigkeiten. Als ein Beispiel, einige Browser (Chrome) zeigen 10px in dem Dokument unten, und einige von Ihnen (Firefox) – nicht:
weitere Informationen https://javascript.info/styles-and-classes
InformationsquelleAutor der Antwort Lekens
Wenn offsetWidth 0 zurückgibt, können Sie get-element die style-width-Eigenschaft und Suche es für eine Zahl. "100px" -> 100
/\d*/.exec(MyElement.Stil.Breite)
InformationsquelleAutor der Antwort Arko