# Метод 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 стили элемента

← →
↑