Определение высоты элементов без правил высоты CSS

При отсутствии правила высоты CSS для элемента получить его может быть сложно его высота. Метод jQuery .height(), для которого требуется предварительно определенное значение высоты CSS, кажется неадекватным в этом сценарии. Однако существуют альтернативные методы определения высоты элемента.

jQuery .height()

Вопреки распространенному мнению, jQuery .height() не полагается на в определении высоты CSS. Он вычисляет вычисленную высоту элемента, что делает его подходящим для сценариев, где не указана явная высота CSS.

DEMO

.height(): извлекает высоту элемента без отступов, границ и полей.

.innerHeight(): извлекает высоту элемента, включая отступы, но исключая границу и Margin.

.outerHeight(): извлекает высоту элемента, включая границу, но исключая поля.

.outerHeight(true): извлекает высоту элемента, включая границу и поле.

Фрагмент кода для интерактивной демонстрации

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