Метод width - получение ширины элемента
Метод width позволяет получать
и изменять ширину элемента. Важно помнить, что мы
будем получать 'вычисленное значение' ширины
(англ. computed width).
В отличие от метода
css('width'),
он возвращает безразмерную величину (к примеру 400)
и удобен при математических вычислениях.
Метод получает ширину контента элемента, независимо от
указания CSS-свойства
⁅с href="/ru/markup/manual/css/property/box-sizing/"⁆box-sizing⁅/с⁆. Чтобы
избежать неудобств, связанных с этим, рекомендуется
использовать css('width').
Ошибки в вычислении могут также возникать, если
пользователь меняет размеры страницы, а также, если
элемент или его родитель скрыты. Значение ширины не
учитывает значения отступов и рамки.
Синтаксис
Получить ширину элемента. В некоторых случаях полученные значения могут быть дробными:
$(селектор).width();
Чтобы изменить ширину элемента - можно передать просто
число (к примеру 400), тогда единицы
измерения будут пиксели, либо строку,
с указанием единиц измерения (к примеру
'10em'):
$(селектор).width(новое значение);
Также мы можем применить заданную функцию к каждому
элементу в наборе. При этом первым параметром функция
получит номер элемента в наборе, а вторым параметром
- текущее значение заданной ширины для конкретного
элемента. Значение this внутри функции будет
указывать на текущий элемент.
Значение ширины элемента поменяется на то,
которое вернет функция:
$(селектор).width(function(номер в наборе, текущее значение ширины))ж
Пример
Давайте при нажатии на div поменяем ему
ширину на значение 40px, используя метод
width, а также с помощью css
поменяем его фон на зеленый:
<div id="test"></div>
#test {
width: 90px;
height: 80px;
background: red;
color: white;
margin-top: 10px;
cursor: pointer;
}
$('#test').one('click', function() {
$(this).width(40).css({
cursor: 'auto',
backgroundColor: 'green'
});
});
Смотрите также
-
метод
height,
который позволяет получать и изменять высоту элемента -
метод
innerWidth,
который позволяет получать и изменять ширину элемента, учитывая его внутренние отступы -
метод
outerWidth,
который позволяет получать и изменять ширину элемента, учитывая его отступы и границу -
метод
css,
который позволяет получать и изменять CSS стили элемента