Wie bestimme ich die Elementhöhe in jQuery ohne explizite CSS-Höhenregeln?

Bestimmen der Höhe von Elementen ohne CSS-Höhenregeln

Wenn für ein Element keine CSS-Höhenregel vorhanden ist, kann es schwierig sein, diese zu erhalten seine Höhe. Die jQuery-Methode .height(), die einen vordefinierten CSS-Höhenwert erfordert, scheint in diesem Szenario unzureichend zu sein. Es gibt jedoch alternative Methoden, um die Höhe eines Elements zu bestimmen.

jQuery .height()

Entgegen der landläufigen Meinung ist jQuery .height() nicht darauf angewiesen auf einer CSS-Höhendefinition. Es berechnet die berechnete Höhe des Elements und eignet sich daher für Szenarien, in denen keine explizite CSS-Höhe angegeben ist.

DEMO

.height(): Ruft die Höhe des Elements ab ohne Polsterung, Rahmen oder Rand.

.innerHeight(): Ruft die Höhe des Elements einschließlich Polsterung, aber ohne Rand und Rand ab.

.outerHeight(): Ruft die Höhe des Elements einschließlich Rand, aber ohne ab margin.

.outerHeight(true): Ruft die Höhe des Elements einschließlich Rand und Rand ab.

Code-Snippet für Live-Demo

<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>

Das obige ist der detaillierte Inhalt vonWie bestimme ich die Elementhöhe in jQuery ohne explizite CSS-Höhenregeln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!