Wie erhalte ich die Höhe eines Div, wenn keine explizite CSS-Höhe festgelegt ist?

Div-Höhe ohne explizite CSS-Regel bestimmen

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, Rand und Rand aus.
• .innerHeight(): Schließt Abstand, aber keinen Rand und Rand ein.
• .outerHeight(): Beinhaltet Rand, aber schließt Rand aus.
• .outerHeight(true): Beinhaltet Rand.

Verwendungsdemo

Der folgende Codeausschnitt zeigt, wie diese Funktionen verwendet werden:

<code class="js">$(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>')
});</code>

Ausgabe:

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

Das obige ist der detaillierte Inhalt vonWie erhalte ich die Höhe eines Div, wenn keine explizite CSS-Höhe festgelegt ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!