Bestimmen Sie die Div-Höhe ohne explizite CSS-Regel

Das Ermitteln der Höhe eines Div kann schwierig sein, wenn im CSS keine explizit festgelegte Höhe vorhanden ist. Normalerweise wird hierfür die jQuery-Methode .height() verwendet, für die ordnungsgemäße Funktionalität ist jedoch eine vorhandene CSS-Regel erforderlich. Hier ist ein alternativer Ansatz:

jQuery-Höhenfunktionen

jQuery bietet eine Reihe von Höhenfunktionen, die auch ohne CSS-Höhenregeln genaue Höhenmessungen liefern können:

• .height(): Schließt Abstand, Rahmen und aus margin.
• .innerHeight(): Beinhaltet Abstand, aber schließt Rand und Rand aus.
• .outerHeight(): Enthält Rand, aber schließt Rand aus.
• .outerHeight(true): Beinhaltet margin.

Verwendungsdemo

Der folgende Codeausschnitt zeigt, wie diese Funktionen verwendet werden:

$(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>')
});

Ausgabe:

Die berechnete Höhe des Div wird im Div selbst angezeigt und bietet detaillierte Informationen über die Ausgabe jeder Funktion.