Работа с высотой элемента
.height() – возвращает, или позволяет установить новое значение высоты для первого элемента в наборе.
Функция имеет несколько вариантов использования.
.height()
Возвращает текущее значение высоты для первого элемента в наборе элементов без учёта полей (padding), границ (border) и отступов (margin).
Отличием .css(heigth)
от .height()
является то, что в том, что данный метод возвращает исключительно числовое значение (к примеру, 400, а не 400px). Метод .height()
рекомендуется использовать, когда полученное значение необходимо использовать в математических вычислениях.
Данный метод можно использовать для получения высоты документа и окна.
// Возвращает высоту окна браузера $( window ).height(); // Возвращает высоту html-документа $( document ).height();
Заметьте, что метод .height()
всегда возвращает высоту контента, не учитывая значение свойства CSS box-sizing
. Начиная с jQuery 1.8, вам необходимо получить значение свойства box-sizing
, затем отнять размер рамки и отступов. Всё это в том случае, если к элементу применяется свойство box-sizing: border-box
. Чтобы избежать этих вычислений, используйте .css("height")
.
Примечание: Несмотря на то, что .width()
или .height()
вернут значение, когда элемент позиционирован абсолютно и установлен display:block, это нежелательно – результаты могут оказаться неточными.
.height( value )
Устанавливает новое значение высоты равное value, для всех выбранных элементов
- value — целое число или число с единицей измерения в виде строки. Если передано только число, то jQuery автоматически прибавляет “px”. Если строка, то она должна выглядеть так: 100px, 50%, или auto. Надо заметить, что в современных браузерах в высоту не входят значения отступов и рамки.
.height( function )
Устанавливает новое значение высоты элементов, равное значению, которое вернет пользовательская функция.
- function (index, height) — функция, которая вызывается индивидуально для каждого отдельного элемента в наборе
- index — позиция элемента в наборе;
- height — текущее значение высоты элемента.
> function (index, height) — функция, которая вызывается индивидуально для каждого отдельного элемента в наборе
Спасибо за эту фразу и такую формулировку!
Десяток сайтов просмотрел с описанием jQuery-метода height(), но только здесь понял, для чего индекс и как им пользоваться в данном контексте.