Определить высоту элемента div без явного правила CSS

Получение высоты элемента div может оказаться сложной задачей, если в CSS явно не задана высота. Хотя для этого обычно используется метод jQuery .height(), для правильной функциональности ему требуется существующее правило CSS. Вот альтернативный подход:

Функции высоты jQuery

jQuery предлагает ряд функций высоты, которые могут обеспечить точные измерения высоты даже без правил высоты CSS:

• .height(): Исключает отступы, границы и поля.
• .innerHeight(): Включает отступы, но исключает границу и поле.
• .outerHeight(): Включает границу, но исключает поля.
• .outerHeight(true): Включает Margin.

Демо использования

Приведенный ниже фрагмент кода демонстрирует, как использовать эти функции:

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

Вывод:

Вычисленная высота элемента div отображается в самом элементе div, предоставляя подробную информацию о выводе каждой функции.