Wie rufe ich die tatsächliche Breite und Höhe eines HTML-Elements ab?

893

Angenommen, ich habe eine <div>, die ich in der Anzeige des Browsers (Ansichtsfenster) zentrieren möchte. Dazu muss ich die Breite und Höhe des <div>Elements berechnen .

Was soll ich verwenden? Bitte geben Sie Informationen zur Browserkompatibilität an.

javascript html xhtml dhtml snortasprocket
quelle

9

Beachten Sie, dass das Abrufen der Höhe eines Elements durch eine beliebige Methode immer Auswirkungen auf die Leistung hat, da der Browser die Position aller Elemente auf der Seite neu berechnet (Reflow). Vermeiden Sie es daher, zu viel zu tun. Überprüfen Sie diese Liste, welche Art von Dingen einen Reflow auslösen.

Marcelo Lazaroni

1286

Sie sollten die Eigenschaften .offsetWidthund .offsetHeightverwenden. Beachten Sie, dass sie nicht zum Element gehören .style.

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

Die Funktion.getBoundingClientRect() gibt nach Durchführung von CSS-Transformationen Dimensionen und Position des Elements als Gleitkommazahlen zurück.

> console.log(document.getElementById('id').getBoundingClientRect())
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

Greg
quelle

174

In acht nehmen! offsetHeight / offsetWidth kann 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.

Dan Fabulich

37

Dokumentation über .offsetWidthund .offsetHeight: developer.mozilla.org/de/Determining_the_dimensions_of_elements

Denilson Sá Maia

30

Unter welchen Umständen gibt es 0 zurück?

Gepard

46

@JDandChips: offsetWidthist 0, wenn das Element ist display:none, während das berechnete Element widthin diesem Fall möglicherweise noch einen positiven Wert hat. visibility:hiddenwirkt sich nicht auf die offsetWidth.

MrWhite

21

@Supuhstar beide haben unterschiedliche Bedeutungen. offsetWidthGibt das "ganze" Feld einschließlich Inhalt, Auffüllung und Rahmen zurück. while clientWidthgibt nur die Größe des Inhaltsfelds zurück (daher hat es einen kleineren Wert, wenn das Element eine Auffüllung und / oder einen Rand ungleich Null aufweist). (Mod aus Gründen der Klarheit bearbeitet)

Edurne Pascual

200

Schau es dir an Element.getBoundingClientRect().

Diese Methode wird ein Objekt zurückgeben , die enthalten width, heightund 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, dies hat nicht die Probleme, die .offsetWidthund .offsetHeighttun, wo sie manchmal zurückkehren 0(wie in den Kommentaren hier diskutiert )

Ein weiterer Unterschied ist , getBoundingClientRect()kann fraktionierten Pixel zurückzukehren, wo .offsetWidthund .offsetHeightrundet auf die nächste ganze Zahl.

IE8 Hinweis : GibtgetBoundingClientRect in IE8 und darunter keine Höhe und Breite zurück . *

Wenn Sie IE8 unterstützen müssen , verwenden Sie .offsetWidthund .offsetHeight:

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

Es ist erwähnenswert, dass das von dieser Methode zurückgegebene Objekt kein normales Objekt ist. Seine Eigenschaften sind nicht aufzählbar ( Object.keysfunktioniert also beispielsweise nicht sofort ).

Weitere Informationen hierzu finden Sie hier: So konvertieren Sie ein ClientRect / DomRect am besten 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

Zach Lysobey
quelle

8

getBoundingClientRect () die tatsächliche Breite und Höhe der Elemente über Einschreiben CSS skaliert während offsetHeightund offsetWidthwird nicht.

Luke

66

HINWEIS : Diese Antwort wurde 2008 geschrieben. Zu der Zeit war die beste browserübergreifende Lösung für die meisten Menschen die Verwendung von jQuery. Ich lasse die Antwort hier für die Nachwelt und wenn Sie jQuery verwenden, ist dies eine gute Möglichkeit, dies zu tun. Wenn Sie ein anderes Framework oder reines JavaScript verwenden, ist die akzeptierte Antwort wahrscheinlich der richtige Weg.

Ab 1.2.6 jQuery können Sie eine der Kern verwenden CSS - Funktionen , heightund width(oder outerHeightund outerWidth, je nach Bedarf).

var height = $("#myDiv").height();
var width = $("#myDiv").width();

var docHeight = $(document).height();
var docWidth = $(document).width();

Tvanfosson
quelle

45

Nur für den Fall, dass es für irgendjemanden nützlich ist, habe ich ein Textfeld, eine Schaltfläche und ein Div mit demselben CSS eingefügt:

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 Chrom, Firefox und ie-Edge versucht, ich habe es mit jquery und ohne versucht, und ich habe es mit und ohne versucht 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

Graham
quelle

1

Um ganz klar zu sein ... macht einer dieser Browser etwas anderes als jeder andere? Ich kann keine Unterschiede finden ... Auch ich bin nicht nach unten-Voting (noch) nicht , aber das ist nicht wirklich direkt auf die Frage zu beantworten, obwohl es leicht , dies zu tun editierte werden kann.

Zach Lysobey

1

War nicht darauf ausgerichtet, die Frage zu beantworten - sie wurde bereits beantwortet. Nur ein paar hilfreiche Informationen und ja, alle Browser der neuesten Version stimmen diesen Werten zu - was gut ist.

Graham

3

Nun ... wenn Sie nicht die Absicht haben, die Frage zu beantworten, dann gehört dies nicht wirklich hierher (als "Antwort"). Ich würde in Betracht ziehen, dies in eine externe Ressource (vielleicht einen GitHub-Kern oder einen Blog-Beitrag) zu stellen und es in einem Kommentar zur ursprünglichen Frage oder einer der Antworten zu verknüpfen.

Zach Lysobey

21

@ZachLysobey Es gibt Ausnahmen zu jeder Regel - und das ist eine coole, nützliche Sache zu sehen.

Dan Nissenbaum

16

Laut MDN: Ermittlung der Abmessungen von Elementen

offsetWidthund offsetHeightgeben Sie die "Gesamtfläche zurück, die ein Element einnimmt, einschließlich der Breite des sichtbaren Inhalts, der Bildlaufleisten (falls vorhanden), des Auffüllens und des Rahmens".

clientWidthund geben Sie clientHeightzurück, "wie viel Platz der tatsächlich angezeigte Inhalt einnimmt, einschließlich Auffüllen, jedoch ohne Rand, Ränder oder Bildlaufleisten".

scrollWidthund scrollHeightgeben Sie die "tatsächliche Größe des Inhalts zurück, unabhängig davon, wie viel davon derzeit sichtbar ist".

Es hängt also davon ab, ob der gemessene Inhalt voraussichtlich außerhalb des aktuell sichtbaren Bereichs liegt.

HarlemSquirrel
quelle

5

Sie müssen es nur für IE7 und älter berechnen (und nur, wenn Ihr Inhalt keine feste Größe hat). Ich schlage vor, HTML-bedingte Kommentare zu verwenden, um den Hack auf alte IEs zu beschränken, die CSS2 nicht unterstützen. Verwenden Sie für alle anderen Browser Folgendes:

<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>

Dies ist die perfekte Lösung. Es zentriert <div>jede Größe und verkleinert es auf die Größe seines Inhalts.

Kornel
quelle

3

Es ist einfach, die Elementstile zu ändern, aber es ist etwas schwierig, den Wert zu lesen.

JavaScript kann keine Elementstileigenschaft (elem.style) lesen, die von CSS (intern / extern) stammt, es sei denn, Sie verwenden den integrierten Methodenaufruf getComputedStyle in Javascript.

getComputedStyle (Element [, Pseudo])

Element: Das Element, für das der Wert gelesen werden soll.
pseudo: Ein Pseudoelement, falls erforderlich, zum Beispiel :: before. Eine leere Zeichenfolge oder kein Argument bedeutet das Element selbst.

Das Ergebnis ist ein Objekt mit Stileigenschaften wie elem.style, jetzt jedoch in Bezug auf alle CSS-Klassen.

Zum Beispiel sieht der Stil hier nicht den Rand:

<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>

Ändern Sie daher Ihren JavaScript-Code so, dass er den getComputedStyle des Elements enthält, dessen Breite / Höhe oder ein anderes Attribut Sie erhalten möchten

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);
    }

}

Berechnete und aufgelöste Werte

In CSS gibt es zwei Konzepte:

Ein berechneter Stilwert ist der Wert, nachdem alle CSS-Regeln und die CSS-Vererbung als Ergebnis der CSS-Kaskade angewendet wurden. Es kann aussehen wie Höhe: 1em oder Schriftgröße: 125%.

Ein aufgelöster Stilwert ist derjenige, der schließlich auf das Element angewendet wird. Werte wie 1em oder 125% sind relativ. Der Browser nimmt den berechneten Wert und macht alle Einheiten fest und absolut, zum Beispiel: Höhe: 20px oder Schriftgröße: 16px. Für Geometrieeigenschaften können aufgelöste Werte einen Gleitkomma haben, z. B. Breite: 50,5 Pixel.

Vor langer Zeit wurde getComputedStyle erstellt, um berechnete Werte abzurufen. Es stellte sich jedoch heraus, dass aufgelöste Werte viel praktischer sind, und der Standard wurde geändert.
Heutzutage gibt getComputedStyle den aufgelösten Wert der Eigenschaft zurück.

Bitte beachten Sie:

getComputedStyle benötigt den vollständigen Eigenschaftsnamen

Sie sollten immer nach der genauen Eigenschaft fragen, die Sie möchten, z. B. paddingLeft oder height oder width. Andernfalls kann das korrekte Ergebnis nicht garantiert werden.

Wenn es beispielsweise Eigenschaften paddingLeft / paddingTop gibt, was sollten wir dann für getComputedStyle (elem) .padding erhalten? Nichts oder vielleicht ein "generierter" Wert aus bekannten Polstern? Hier gibt es keine Standardregel.

Es gibt andere Inkonsistenzen. Einige Browser (Chrome) zeigen im folgenden Dokument beispielsweise 10 Pixel an, andere (Firefox) - nicht:

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

Weitere Informationen finden Sie unter https://javascript.info/styles-and-classes

Lekens
quelle

1

element.offsetWidth und element.offsetHeight sollten dies tun, wie im vorherigen Beitrag vorgeschlagen.

Wenn Sie den Inhalt jedoch nur zentrieren möchten, gibt es eine bessere Möglichkeit. Angenommen, Sie verwenden xhtml strict DOCTYPE. Setzen Sie den Rand: 0, die Auto-Eigenschaft und die erforderliche Breite in px auf das Body-Tag. Der Inhalt wird mittig auf die Seite ausgerichtet.

questzen
quelle

1

Ich denke, er möchte es auch vertikal zentrieren, was bei CSS ein richtiger Schmerz ist, es sei denn, Sie können bestimmte Kriterien erfüllen (z. B. Inhalte bekannter Größe)

Greg

1

... scheint CSS zu helfen, div in den Mittelpunkt zu stellen ...

<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>

Sanecin
quelle

0

Sie können auch diesen Code verwenden:

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

var h = divID.style.pixelHeight;

Sergio
quelle

1

Hmm, funktioniert in Chrome und IE9, scheint in Firefox nicht zu funktionieren. Funktioniert es nur für bestimmte Dokumenttypen?

BrainSlugs83

1

pixelHeight war eine Internet Explorer-Erfindung, die nicht mehr verwendet werden sollte stackoverflow.com/q/17405066/2194590

HolgerJeromin

0

wenn Sie es im Anzeigeport des Browsers zentrieren müssen; Sie können dies nur mit CSS erreichen

yourSelector {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

tdjprog
quelle

-2

Hier ist der Code für WKWebView, der die Höhe eines bestimmten Dom-Elements bestimmt (funktioniert nicht richtig für die gesamte Seite).

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 {

        }
    }
}

Aleksey Mazurenko
quelle

Nur um klar zu sein, das ist iOS- swiftCode, oder? Nicht JavaScript. Ich halte eine Ablehnung zurück (b / c kann dies tatsächlich ziemlich nützlich sein), aber bitte beachten Sie, dass dies die Frage nicht beantwortet und wahrscheinlich für eine andere, iOS-spezifische Frage angemessener wäre. Wenn es noch keine gibt, sollten Sie vielleicht eine fragen und sich selbst beantworten.

Zach Lysobey

-3

Wenn offsetWidth 0 zurückgibt, können Sie die Eigenschaft style width des Elements abrufen und nach einer Zahl suchen. "100px" -> 100

/\d*/.exec(MyElement.style.width)

Arko
quelle

Wie rufe ich die tatsächliche Breite und Höhe eines HTML-Elements ab?

Antworten: