Метод outerHeight - получение высоты элемента
Метод outerHeight позволяет получать
и изменять высоту элемента с учетом внутренних отступов,
границы и выборочно - внешних отступов элемента. Важно
помнить, что мы будем получать 'вычисленное значение' высоты
(англ. computed height).
Ошибки в вычислении могут также возникать, если
пользователь меняет размеры страницы, а также, если
элемент или его родитель скрыты.
Синтаксис
Так мы можем получить высоту элемента. Этот метод может
принимать необязательный параметр в виде true
или false (false стоит по умолчанию),
в зависимости от того - будут учитываться внешние
отступы или нет. В некоторых случаях
полученные значения могут быть дробными:
$(селектор).outerWidth([включая_margin]);
Чтобы изменить ширину элемента - можно передать просто
число (к примеру 400), тогда единицы
измерения будут пиксели, либо строку,
с указанием единиц измерения (к примеру
'10em'):
$(селектор).outerHeight(новое значение, [включая_margin]);
Также мы можем применить заданную функцию к каждому
элементу в наборе. При этом первым параметром функция
получит номер элемента в наборе, а вторым параметром
- текущее значение заданной высоты для конкретного
элемента. this внутри функции будет
указывать на текущий элемент.
Значение ширины элемента поменяется на то,
которое вернет функция:
$(селектор).outerHeight(function(номер в наборе, текущее значение высоты));
Пример
Давайте для сравнения выведем информацию о
высоте абзаца #test, полученной методами
height,
innerHeight и
outerHeight:
<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
let h1 = $('#test').height();
let h2 = $('#test').innerHeight();
let h3 = $('#test').outerHeight();
let h4 = $('#test').outerHeight(true);
$('#out1').text(h1);
$('#out2').text(h2);
$('#out3').text(h3);
$('#out4').text(h4);
Смотрите также
-
метод
height,
который позволяет получать и изменять высоту элемента -
метод
innerHeight,
который позволяет получать и изменять высоту элемента, учитывая его внутренние отступы