Wie bekomme ich die Höhe von in px-Dimension

Lesezeit: 3 Minuten

Benutzer-Avatar
pravin

Ich habe die jQuery-Bibliothek verwendet, um die Höhe von a herauszufinden div.

Unten ist mein div Element mit Attributen:

<DIV id="myDiv" style="height:auto; width:78;overflow:hidden"> Simple Test</DIV>

Unten ist mein jQuery-Code, um die Höhe zu erhalten <div>

var result = $("#myDiv").css('height');
alert(result);

Nachdem ich die obige Anweisung ausgeführt habe, erhalte ich das Ergebnis als “auto”. Eigentlich erwarte ich das nicht, sondern ich wollen das Ergebnis in px-Dimension.

  • Mögliches Duplikat von Wie erhalten Sie die gerenderte Höhe eines Elements?

    – Penny Liu

    6. August 2019 um 15:03 Uhr

Sie unterscheiden sich zwar geringfügig darin, wie sie einen Höhenwert abrufen, dh einige würden das gesamte Element berechnen, einschließlich Polsterung, Rand, Bildlaufleiste usw., und andere würden nur das Element in seiner Rohform berechnen.
Sie können diese ausprobieren:

Javascript:

var myDiv = document.getElementById("myDiv");
myDiv.clientHeight;
myDiv.scrollHeight;
myDiv.offsetHeight;

oder in jquery:

$("#myDiv").height();
$("#myDiv").innerHeight();
$("#myDiv").outerHeight();

  • Sehr nützlich für die Übersetzung in Javascript, wenn Sie jQuery vermeiden möchten

    – IgniteCoders

    11. Dezember 2014 um 11:57 Uhr

  • Die meisten Antworten sind auf Forget ‘scrollHeight’! Und …. die meiste Zeit, wenn das System eine Art Bootstraped mit mehreren Schichten ist … ist es das echte! Vielen Dank! Sie können Math.round(Math.max(bodyDiv.clientHeight, bodyDiv.scrollHeight, bodyDiv.offsetHeight) || 0) verwenden

    – Pedro Ferreira

    3. April 2016 um 3:26 Uhr


Verwenden .height() so was:

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

Es gibt auch .innerHeight() und .outerHeight() es hängt davon ab exakt was du willst.

Hier können Sie es testenspielen Sie mit der Polsterung/den Rändern/dem Inhalt, um zu sehen, wie sie sich ändern.

  • Ach, was zum Teufel. +1 dafür, dass du mich um eine Minute statt der üblichen 2-20 Sekunden geschlagen hast.

    – djdd87

    1. Oktober 2010 um 12:54 Uhr

  • Ich bekomme immer 1, wenn ich diese Methode verwende.

    – Roy Hinkley

    12. Juni 2014 um 18:29 Uhr

  • @AndroidAddict, sind deine Inhalte zufällig alle im Div geschwebt? wenn ja gib es ein overflow: auto damit sich die Höhe zu den Schwimmern richtig ausdehnt. So verhalten sich Floats, geben Sie ihm einen Rahmen, um zu sehen, was ich meine.

    – Nick Craver

    12. Juni 2014 um 22:52 Uhr

Verwenden height():

var result = $("#myDiv").height();
alert(result);

Dadurch erhalten Sie die einheitslose berechnete Höhe in Pixel. “px” wird aus dem Ergebnis entfernt. Das heißt, wenn die Höhe 400 Pixel beträgt, ist das Ergebnis 400, aber das Ergebnis wird in Pixel angezeigt.

Wenn Sie es tun möchten ohne jQuery können Sie einfaches JavaScript verwenden:

var result = document.getElementById("myDiv").offsetHeight;

  • Danke für die “rohe” Javascript-Lösung.

    – peter.o

    25. Juli 2013 um 12:21 Uhr

  • Beachten Sie, dass element.offsetHeight berücksichtigt keine Transformationen (zB transform: scale(0.5)). Wenn Sie diese benötigen, element.getBoundingClientRect().height ist besser geeignet.

    – Glücksdonald

    11. November 2020 um 12:45 Uhr


Für diejenigen, die nach einer einfachen JS-Lösung suchen:

let el = document.querySelector("#myElementId");

// including the element's border
let width = el.offsetWidth;
let height = el.offsetHeight;

// not including the element's border:
let width = el.clientWidth;
let height = el.clientHeight;

Kasse Dieser Artikel für mehr Details.

Es gibt eine integrierte Methode, um das Begrenzungsrechteck zu erhalten: Element.getBoundingClientRect.

Das Ergebnis ist das kleinste Rechteck, das das gesamte Element enthält, mit den schreibgeschützten Elementen left, top, right, bottom, x, y, width und
Höhe Eigenschaften.

Siehe das Beispiel unten:

let innerBox = document.getElementById("myDiv").getBoundingClientRect().height;
document.getElementById("data_box").innerHTML = "height: " + innerBox;
body {
  margin: 0;
}

.relative {
  width: 220px;
  height: 180px;
  position: relative;
  background-color: purple;
}

.absolute {
  position: absolute;
  top: 30px;
  left: 20px;
  background-color: orange;
  padding: 30px;
  overflow: hidden;
}

#myDiv {
  margin: 20px;
  padding: 10px;
  color: red;
  font-weight: bold;
  background-color: yellow;
}

#data_box {
  font: 30px arial, sans-serif;
}
Get height of <mark>myDiv</mark> in px dimension:
<div id="data_box"></div>
<div class="relative">
  <div class="absolute">
    <div id="myDiv">myDiv</div>
  </div>
</div>

1215630cookie-checkWie bekomme ich die Höhe von in px-Dimension

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy