Работа с шириной элемента
.width() – возвращает, или позволяет установить новое значение ширины для первого элемента в наборе.
Функция имеет несколько вариантов использования.
.width()
Возвращает текущее значение ширины для первого элемента в наборе элементов без учёта полей (padding), границ (border) и отступов (margin).
Отличием
от .css(width)
является то, что данный метод возвращает исключительно числовое значение (к примеру, 400, а не 400px). Метод .width()
рекомендуется использовать, когда полученное значение необходимо использовать в математических вычислениях..width()
Данный метод можно использовать для получения ширины документа и окна.
// Возвращает ширину окна браузера $( window ).width(); // Возвращает ширину html-документа $( document ).width();
Заметьте, что метод
всегда возвращает высоту контента, не учитывая значение свойства CSS .width()
. Начиная с jQuery 1.8, вам необходимо получить значение свойства box-sizing
, затем отнять размер рамки и отступов. Всё это в том случае, если к элементу применяется свойство 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 — текущее значение ширины элемента.