Метод height - получение высоты элемента
Метод height позволяет получать
и изменять высоту элемента. Важно помнить,
что мы будем получать 'вычисленное значение'
высоты (англ. computed height).
В отличие от метода
css('height'),
он возвращает безразмерную величину (к примеру 400)
и удобен при математических вычислениях.
Метод получает высоту контента элемента, независимо от
указания CSS-свойства
box-sizing.
Чтобы избежать лишних вычислений, рекомендуется
использовать css('height').
Ошибки в вычислении могут также возникать, если
пользователь меняет размеры страницы, а также, если
элемент или его родитель скрыты. Значение высоты не
учитывает значения отступов и рамки.
Синтаксис
Получить высоту элемента. В некоторых случаях полученные значения могут быть дробными:
$(селектор).height();
Чтобы изменить высоту элемента - можно передать просто
число (к примеру 400), тогда единицы
измерения будут пиксели, либо строку,
с указанием единиц измерения (к примеру
'10em'):
$(селектор).height(новое значение);
Также мы можем применить заданную функцию к каждому
элементу в наборе. При этом первым параметром функция
получит номер элемента в наборе, а вторым параметром
- текущее значение заданной высоты для конкретного
элемента. this внутри функции будет
указывать на текущий элемент.
Значение высоты элемента поменяется на то, которое вернет функция:
$(селектор).height(function(номер в наборе, текущее значение высоты));
Пример
Давайте при клике на #test поменяем ему
высоту на значение 30px, используя метод
height, а также с помощью css
поменяем его фон на зеленый:
<div id="test"></div>
#test {
width: 50px;
height: 90px;
background: red;
color: white;
margin-top: 10px;
cursor: pointer;
}
$('#test').one('click', function() {
$(this).height(30).css({
cursor: 'auto',
backgroundColor: 'green'
});
});
Смотрите также
-
метод
width,
который позволяет получать и изменять ширину элемента -
метод
innerHeight,
который позволяет получать и изменять высоту элемента, учитывая его внутренние отступы -
метод
outerHeight,
который позволяет получать и изменять высоту элемента, учитывая его отступы и границу -
метод
css,
который позволяет получать и изменять CSS стили элемента