Wie berechne ich die Höhe eines divs mit Text und einer festen Breite?
Ich habe den folgenden Code:
%Vor%Ich wollte die Höhe dieses div von der Verwendung von Javascript wissen. Gibt es einen Weg dazu? Dieses div hat eine feste Größe (in diesem Fall 150px). Ich wollte nur wissen, dass die Höhe des Div den Text verändert hat. Bevorzugte Methode ist über jQuery aber Javascript ist auch gut
BEARBEITEN:
Eine sehr wichtige Anmerkung ist, dass dies eine Berechnung ist, bevor das Div gerendert wird. Ich erstelle im Grunde ein pinterest Layout und ich muss die Höhe der Kommentare in der Elementkarte berechnen, damit Mauerwerk es zuerst auslegen kann, bevor das Bild geladen wird.
6 Antworten
Javascript:
%Vor%Dies gibt die Höhe eines Elements an
Siehe offsetHeight hier und das ist reines JavaScript.
>jQuery:
$elem.height(); - gibt die Höhe des Elements ohne Füllung, Rahmen und Rand
$elem.innerHeight(); - gibt die Höhe einschließlich der Füllung an
$elem.outerHeight(true); - gibt die Höhe inklusive Füllung, Rahmen und Rand
BEARBEITEN:
Wenn Sie die Höhe des Elements finden möchten, bevor es gerendert wird, kann ich Ihnen eine von vielen möglichen Lösungen geben
- Fügen Sie das Element mit den entsprechenden innerHTMLs an den Body an
- Finden Sie die Höhe mit einer der oben genannten Methoden
- Entfernen Sie nun das Element und natürlich haben Sie die Höhe & amp; Element ist nicht da
Siehe Geige: Um die Höhe eines Elements zu berechnen
.height ()
Beschreibung: Ermittelt die aktuelle berechnete Höhe.
-
.height()- jQuery-API-Dokumentation
.innerHeight ()
Beschreibung: Ruft die aktuelle berechnete Höhe ab, einschließlich der Füllung, aber nicht des Rahmens.
-
.innerHeight()- jQuery-API-Dokumentation
.outerHeight ()
Beschreibung: Ruft die aktuelle berechnete Höhe ab, einschließlich Auffüllen, Rahmen und optional Rand.
-
.outerHeight()- jQuery-API-Dokumentation
In jQuery: height gibt die Höhe ohne Rahmen oder Auffüllung an, innerHeight gibt die Höhe einschließlich Auffüllung ohne Rahmen und outerHeight gibt Höhe mit Rahmen und Auffüllung mit der Option, auch Ränder einzuschließen.
I vanillaJS, wie Prasath K darauf hingewiesen hat, offsetHeight gibt dir die Höhe inklusive Padding und Rahmen.
Es gibt keine Möglichkeit, die Höhe eines Elements zu berechnen, das nicht in dom ist. Sie können es irgendwo im Dom hinzufügen, die Höhe mit einer der oben genannten Methoden berechnen und dann wieder entfernen.
Zusätzlich zu den oben beschriebenen Techniken können Sie visibility: hidden (CSS) verwenden, um das Element bei der Berechnung nicht auf dem Bildschirm zu haben. Normalerweise können Sie display: none nicht verwenden, da das Element in diesem Status normalerweise keine Dimensionen aufweist.
Sie könnten auch mit einem negativen z-index in ein div unter einem verdeckenden Element rendern.
Tags und Links javascript jquery css