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;
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
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.
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;
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;
Mögliches Duplikat von Wie erhalten Sie die gerenderte Höhe eines Elements?
– Penny Liu
6. August 2019 um 15:03 Uhr