Работа с высотой элемента

Материал из JQuery

Перейти к: навигация, поиск
.height()  .innerHeight()  .outerHeight()

Функции возвращают высоту элемента. Кроме этого, с помощью height(), можно установить новое значение высоты. Имеется несколько вариантов использования функций:

.height() .innerHeight() .outerHeight([includeMargin]):integer1.0

все три функции возвращают высоту первого из выбранных элементов страницы. Отличия у функций следующие:

height() — высота элемента без учета отступов и толщины рамки.
innerHeight() — высота элемента с учетом размера внутренних отступов (padding).
outerHeight(includeMargin) — высота элемента с учетом внутренних отступов, рамки (border-width) и при необходимости внешних отступов (margin). File:Height.png


.height(value):jQuery1.0
устанавливает новое значение высоты равное value, для всех выбранных элементов
.height(function(index, value)):jQuery1.4
устанавливает новое значение высоты элементов, равное значению, которое вернет пользовательская функция. Функция вызывается отдельно, для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента в наборе, value — текущее значение высоты элемента.

Примеры использования:

$("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="http://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~

Ссылки

Поисковые ключи:
  • высота элементов на странице
  • установить высоту
  • изменить высоту элемента
  • установить высоту элемента
  • присвоить значение высоте элемента
  • .height()
  • height()
Поисковые ключи:
  • внутренняя высота элемента
  • .innerHeight()
  • innerHeight()
Поисковые ключи:
  • внешняя высота элемента
  • .outerHeight()
  • outerHeight()