Wie kann ich die Höhe eines div-Elements in jQuery abrufen, auch wenn keine CSS-Höhenregel definiert ist?

So ermitteln Sie die Höhe von Div ohne CSS-Höhenregel

Es kann frustrierend sein, wenn Sie die Höhe eines Elements bestimmen müssen, aber Es ist keine CSS-Höhenregel definiert. Aber keine Sorge! jQuery bietet eine Lösung.

Verwendung der Height()-Methode von jQuery

Im Gegensatz zu dem, was Sie vielleicht annehmen, erfordert die .height()-Methode von jQuery keine vordefinierte CSS-Höhe Regel. Es berechnet die gerenderte Höhe des Elements unter Berücksichtigung seines berechneten Stils. Dies macht es zu einer effektiven Methode, selbst in Szenarien, in denen keine Höhe explizit festgelegt ist.

Informationen zu den Optionen zur Höhenberechnung

jQuery bietet mehrere Methoden zur Höhenberechnung, um Ihren spezifischen Anforderungen gerecht zu werden:

• .height(): Gibt die Höhe des Elements zurück, ohne Polsterung, Ränder und Ränder.
• .innerHeight(): Gibt die Höhe einschließlich Füller, aber ohne Ränder und Ränder zurück.
• .outerHeight(): Gibt die Höhe zurück, einschließlich Rändern, aber ohne Ränder.
• .outerHeight(true): Gibt die Höhe zurück, einschließlich Rändern und aller Verzierungen.

Live-Demonstration

Hier ist ein Codeausschnitt zur Demonstration der verschiedenen Höhenberechnungsmethoden:

$(function() {
  var $heightTest = $('#heightTest');
  $heightTest
    .html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('<p>Height (.height() returns) : ' + $heightTest.height() + ' [Just Height]</p>')
    .append('<p>Inner Height (.innerHeight() returns): ' + $heightTest.innerHeight() + ' [Height + Padding (without border)]</p>')
    .append('<p>Outer Height (.outerHeight() returns): ' + $heightTest.outerHeight() + ' [Height + Padding + Border]</p>')
    .append('<p>Outer Height (.outerHeight(true) returns): ' + $heightTest.outerHeight(true) + ' [Height + Padding + Border + Margin]</p>')
});

Dieser Code erstellt ein Div mit einer Höhe von 180 Pixel und einem Abstand von 10 Pixel , Rand von 10 Pixel und ein blauer Rand. Anschließend wird die mit jeder Methode berechnete Höhe angezeigt. Sie können das gerenderte Ergebnis in der Konsole des Browsers überprüfen.

Das obige ist der detaillierte Inhalt vonWie kann ich die Höhe eines div-Elements in jQuery abrufen, auch wenn keine CSS-Höhenregel definiert ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!