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

.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 — текущее значение высоты элемента.

 

Один ответ к «Работа с высотой элемента»

  1. > function (index, height) — функция, которая вызывается индивидуально для каждого отдельного элемента в наборе
    Спасибо за эту фразу и такую формулировку!
    Десяток сайтов просмотрел с описанием jQuery-метода height(), но только здесь понял, для чего индекс и как им пользоваться в данном контексте.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *