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

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