Работа с высотой элемента
Функции возвращают высоту элемента. Кроме этого, с помощью height(), можно установить новое значение высоты. Имеется несколько вариантов использования функций:
все три функции возвращают высоту первого из выбранных элементов страницы. Отличия у функций следующие:
height() — высота элемента без учета отступов и толщины рамки.
innerHeight() — высота элемента с учетом размера внутренних отступов (padding).
outerHeight(includeMargin) — высота элемента с учетом внутренних отступов, рамки (border-width) и при необходимости внешних отступов (margin).
Примеры использования:
$("div.content").height() | возвратит высоту первого div-элемента с классом content. |
$(document).height() | возвратит высоту всей страницы |
$(".content").height(30) | устанавливает значение высоты в 30 пикселей всем элементам с классом content. |
$("div.content").outerHeight() | возвратит высоту первого div-элемента с классом content. В значение высоты будут включены внутренние отступы и толщина рамок |
$("div.content").outerHeight(true) | аналогично предыдущему примеру, но в значение высоты будут так же включены внешние отступы. |
Замечание 1: использование функции .height() обычно удобнее, чем .css("height"), поскольку возвращаемое ей значение не содержит окончания "px". То есть в первом случае, вы получите 30, а во втором "30px".
Замечание 2: важно отметить, что используя метод .height(name) вы получите значения атрибута только первого элемента из всех выбранных. Если вам нужны значения всех элементов, то следует использовать конструкции типа .map() или .each().
В действии
Увеличим высоту всех элементов во второй колонке на 10 пикселей.
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ ul{ width:110px; float:left; } .item{ width: 100px; height: 20px; float: left; margin: 1px; padding: 3px; background-color: #EEEEEE; list-style-type:none; } ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id="list"~gt~ ~lt~li class="item" style="height:15px"~gt~ Высоко ~lt~/li ~gt~ ~lt~li class="item" style="height:18px"~gt~ Быстро ~lt~/li ~gt~ ~lt~li class="item" style="height:21px"~gt~ Сильно ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~ul id="list2"~gt~ ~lt~li class="item" style="height:15px"~gt~ Выше ~lt~/li ~gt~ ~lt~li class="item" style="height:18px"~gt~ Быстрее ~lt~/li ~gt~ ~lt~li class="item" style="height:21px"~gt~ Сильнее ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~gt~ $("#list2 .item").height(function(i,val){ return val+10; }); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~