Работа с шириной элемента

.width() – возвращает, или позволяет установить новое значение ширины для первого элемента в наборе.

Функция имеет несколько вариантов использования.

.width()

Возвращает текущее значение ширины для первого элемента в наборе элементов без учёта полей (padding), границ (border) и отступов (margin).

Отличием .css(width) от .width() является то, что данный метод возвращает исключительно числовое значение (к примеру, 400, а не 400px). Метод .width() рекомендуется использовать, когда полученное значение необходимо использовать в математических вычислениях.

Данный метод можно использовать для получения ширины документа и окна.

// Возвращает ширину окна браузера
$( window ).width();

// Возвращает ширину html-документа
$( document ).width();

Заметьте, что метод .width() всегда возвращает высоту контента, не учитывая значение свойства CSS box-sizing. Начиная с jQuery 1.8, вам необходимо получить значение свойства box-sizing, затем отнять размер рамки и отступов. Всё это в том случае, если к элементу применяется свойство box-sizing: border-box. Чтобы избежать этих вычислений, используйте .css("width").

Несмотря на то, что .width() или .height() вернут значение, когда элемент позиционирован абсолютно и установлен display: block, это нежелательно – результаты могут оказаться неточными.

.width( value )

Устанавливает новое значение ширины равное value, для всех выбранных элементов

Параметры:

  • value — целое число или число с единицей измерения в виде строки. Если передано только число, то jQuery автоматически прибавляет “px”. Если строка, то она должна выглядеть так: 100px, 50%, или auto. Надо заметить, что в современных браузерах в высоту не входят значения отступов и рамки.
.width( function )

Устанавливает новое значение ширины элементов, равное значению, которое вернет пользовательская функция.

Параметры:

  • function (index, height) — функция, которая вызывается индивидуально для каждого отдельного элемента в наборе
    • index — позиция элемента в наборе;
    • height — текущее значение ширины элемента.

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

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