it-swarm.com.de

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

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

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

799
snortasprocket

Sie sollten die Eigenschaften .offsetWidth und .offsetHeight verwenden. Beachten Sie, dass sie zum Element gehören, nicht zu .style.

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

1166
Greg

Schauen Sie sich Element.getBoundingClientRect() an.

Diese Methode gibt ein Objekt zurück, das width, height und einige andere nützliche Werte enthält:

_{
    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 _.offsetWidth_ und _.offsetHeight_ verursachen, wo sie manchmal zurückkehren _0_ (wie in Kommentare hier )

Ein weiterer Unterschied ist, dass getBoundingClientRect() möglicherweise gebrochene Pixel zurückgibt, wobei _.offsetWidth_ und _.offsetHeight_ auf die nächste Ganzzahl runden.

IE8 Hinweis : getBoundingClientRect gibt keine Höhe und Breite auf IE8 zurück und darunter.*

Wenn Sie IE8 unterstützen müssen , verwenden Sie _.offsetWidth_ und _.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 (so funktioniert beispielsweise _Object.keys_ nicht sofort.)

Weitere Informationen hierzu finden Sie hier: So konvertieren Sie ein ClientRect/DomRect am besten in ein einfaches Objekt

Referenz:

172
Zach Lysobey

NOTE: Diese Antwort wurde 2008 geschrieben. Zu der Zeit war die beste browserübergreifende Lösung für die meisten Menschen wirklich jQuery verwenden. 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 jQuery 1.2.6 können Sie eine der Kernfunktionen CSS-Funktionen , height und width (oder outerHeight und outerWidth verwenden ).

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

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

Nur für den Fall, dass es für irgendjemanden nützlich ist, habe ich eine Textbox, einen Button und ein Div mit dem gleichen 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 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 versucht. 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
40
Graham

Nach MDN: Bestimmen der Abmessungen von Elementen

offsetWidth und offsetHeight geben die Gesamtgröße des von einem Element belegten Speicherplatzes zurück, einschließlich der Breite des sichtbaren Inhalts, Bildlaufleisten (falls vorhanden), Auffüllung und Rahmen. "

clientWidth und clientHeight geben zurück, "wie viel Platz der tatsächlich angezeigte Inhalt einnimmt, einschließlich Auffüllen, aber ohne Rand, Rand oder Bildlaufleisten"

scrollWidth und scrollHeight geben die "tatsächliche Größe des Inhalts zurück, unabhängig davon, wie viel davon aktuell sichtbar ist"

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

14
HarlemSquirrel

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> beliebiger Größe und verkleinert es auf die Größe seines Inhalts.

5
Kornel

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

JavaScript kann keine Elementstileigenschaft (elem.style) aus CSS (intern/extern) lesen, 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 :: vor. Ein leerer String 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.

Hier sieht der Stil beispielsweise 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 andere Attribute 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

Es gibt zwei Konzepte in CSS:

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 zuletzt auf das Element angewendet wurde. Werte wie 1em oder 125% sind relativ. Der Browser nimmt den berechneten Wert und macht alle Einheiten fest und absolut, zum Beispiel: height: 20px oder font-size: 16px. Für Geometrieeigenschaften können aufgelöste Werte einen Gleitkommawert haben, z. B. width: 50.5px.

Vor langer Zeit wurde getComputedStyle erstellt, um berechnete Werte zu erhalten, aber es stellte sich heraus, dass aufgelöste Werte viel bequemer sind und der Standard geändert wurde.
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, wie paddingLeft oder height oder width. Andernfalls kann das korrekte Ergebnis nicht garantiert werden.

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

Es gibt andere Inkonsistenzen. Als Beispiel zeigen einige Browser (Chrome) im folgenden Dokument 10px 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

2
Lekens

... scheint CSS zu helfen, div in den Mittelpunkt zu rücken ...

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

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, Auto-Eigenschaft und erforderliche Breite in px auf das Body-Tag. Der Inhalt wird zentriert auf die Seite ausgerichtet.

1
questzen

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

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

sie können auch diesen Code verwenden:

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

var h = divID.style.pixelHeight;
0
mohammad