Wie Kriege ich ein HTML-element, wird die tatsächliche Breite und Höhe?

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.

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 snortasprocket | 2008-11-16

1119

Sollten Sie die .offsetWidth und .offsetHeight Eigenschaften.
Hinweis: Sie gehören zu dem element, nicht .style.

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

Vorsicht! offsetHeight/offsetWidth kann gibt 0 zurück, wenn Sie getan haben, bestimmte DOM-Modifikationen, um das element vor kurzem. Müssen Sie rufen diesen code in eine setTimeout-Aufruf nachdem Sie geändert haben, das element.
Dokumentation über .offsetWidth und .offsetHeight: developer.mozilla.org/en/Determining_the_dimensions_of_elements
Unter welchen Umständen ist Sie wieder 0?
wird 0, wenn das element display:none, in der Erwägung, dass die berechnete width zwar immer noch ein positiver Wert in diesem Fall. visibility:hidden berührt nicht die offsetWidth.
beide haben unterschiedliche Bedeutungen. offsetWidth gibt die "ganze" box mit Inhalt, Polsterung und Rahmen; während clientWidth gibt die Größe der content-box allein (so dass es einen kleineren Wert, wenn das element hat alle nicht-null-padding und/oder border). (mod editiert für Klarheit)

InformationsquelleAutor Greg
156

Werfen Sie einen Blick auf - Element.getBoundingClientRect().

Diese Methode gibt ein Objekt zurück mit den width, height, und einige andere nützliche Werte:
```
{
    width: 960,
    height: 71,
    top: 603,
    bottom: 674,
    left: 360,
    right: 1320
}
```
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 haben, dass .offsetWidth und .offsetHeight tun, wo Sie manchmal zurück 0 (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:
```
var height = element.offsetHeight;
var width = element.offsetWidth;
```
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/getBoundingClientRect
getboundingClientRect() wird wieder die tatsächliche Breite und Höhe von Elementen über css skaliert in der Erwägung, dass offsetHeight und offsetWidth nicht.

InformationsquelleAutor Zach Lysobey
59

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 und width (oder outerHeight und outerWidth als geeignet).
```
var height = $("#myDiv").height();
var width = $("#myDiv").width();

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

Nur für den Fall, es ist für jeden praktisch, ich habe eine textbox, button und div-alle 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>

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:

                                                               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 klar zu sein... nicht alle Browser irgendetwas anders machen von einander? Ich finde keine Unterschiede... Auch bin ich mir nicht runter-voting (noch), aber das ist nicht wirklich direkt die Frage beantworten, obwohl es könnte leicht editierte, um so zu tun.
War immerhin bei der Beantwortung der Frage - seine bereits beantwortet. Nur einige hilfreiche Informationen und ja, alle die Haupt-neueste version Browser nicht einverstanden sind, auf diese Werte - das ist eine gute Sache.
Naja... wenn Ihre Absicht ist es nicht um die Frage zu beantworten, dann ist dies nicht wirklich hierher gehören (als "Antwort"). Ich würde in Erwägung ziehen, diese in einer externen Ressource (vielleicht ein GitHub-gist oder ein blog-post) und verknüpfen es in einem Kommentar auf die ursprüngliche Frage oder der Antworten.
Es gibt Ausnahmen zu jeder Regel - und dies ist ein cooles, nützliches Ding zu sehen.

InformationsquelleAutor Graham

12

Laut MDN: Bestimmung der Dimensionen der Elemente

offsetWidth und offsetHeight Gegenzug die "Gesamt-Menge der Raum, den ein element einnimmt, einschließlich der Breite des sichtbaren Inhalt, Bildlaufleisten (wenn überhaupt), padding und border"

clientWidth und clientHeight 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 und scrollHeight 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 HarlemSquirrel
4

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:
```
<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>
```
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 Kornel
2

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.

getComputedStyle(element, [pseudo])

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

}
```
Berechnet und aufgelöst Werte

Gibt es zwei Konzepte in CSS:

Einer berechneten style-Wert ist der Wert, nachdem alle CSS-Regeln und CSS
Vererbung angewendet wird, als das Ergebnis der CSS-Kaskade. Es Aussehen kann
wie height:1em oder font-size:125%.

Gelöst Stil Wert ist das man endlich auf das element angewendet.
Werte wie 1em oder 125% sind relativ. Der browser nimmt die berechnete
Wert und lässt alle Einheiten fixiert und absolut, zum Beispiel:
Höhe:20px-oder font-size:16px. Für die geometrie-Eigenschaften behoben Werte
kann eine floating-point, wie Breite:50.5 px.

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

Sollten Sie immer Fragen, für die genaue Eigenschaft, die Sie wollen, wie
paddingLeft oder Höhe oder Breite. Ansonsten ist die richtige
Ergebnis ist nicht garantiert.

Zum Beispiel, wenn es gibt Eigenschaften, paddingLeft/paddingTop -, dann
was sollte man sich für getComputedStyle(elem).Polsterung? Nichts, oder
vielleicht ein "erzeugte" Wert aus den bekannten Polstern? Es gibt keine standard -
Regel hier.

Es gibt andere Unstimmigkeiten. Als ein Beispiel, einige Browser (Chrome) zeigen 10px in dem Dokument unten, und einige von Ihnen (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 https://javascript.info/styles-and-classes

InformationsquelleAutor Lekens
1

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.

Ich glaube, er will, um es vertikal zu, das ist eine richtige Schmerzen mit CSS, es sei denn, Sie können einige ganz bestimmte Kriterien erfüllen (z.B. bekannten-Größe Inhalt)

InformationsquelleAutor questzen

... scheint CSS-Hilfe zu setzen div auf center ...

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

InformationsquelleAutor sanecin

0

auch können Sie diesen code verwenden:
```
var divID = document.getElementById("divid");

var h = divID.style.pixelHeight;
```
Hmm, funktioniert in Chrome und IE9, scheint nicht zu funktionieren in Firefox. Funktioniert Sie nur für bestimmte Dokumenttypen?
pixelhöhe wurde ein Internet-Explorer-Erfindung, die sollten nicht mehr verwendet werden, stackoverflow.com/q/17405066/2194590

InformationsquelleAutor
0

wenn Sie brauchen, um es in der browser-display-port; das können Sie erreichen es mit CSS nur
```
yourSelector {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 
```
InformationsquelleAutor tdjprog
-1

Hier ist der code für WKWebView was bestimmt die Höhe von bestimmten Dom-element (funktioniert nicht für die ganze 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 {

        }
    }
}
```
nur um klar zu sein, das ist iOS swift code, richtig? Kein JavaScript. Ich bin witholding einen downvote (b/c dies kann tatsächlich ziemlich nützlich), aber bitte beachten Sie, dass das nicht die Frage zu beantworten, und wäre wahrscheinlich besser geeignet auf einem anderen iOS-spezifische, Frage. Wenn keine bereits vorhanden ist, vielleicht in Betracht ziehen, und sich selbst beantworten.

InformationsquelleAutor Aleksey Mazurenko
-3

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 Arko

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.