Метод width

Метод width позволяет получать и изменять ширину элемента. Важно помнить, что мы будем получать 'вычисленное значение' ширины (computed width). В отличие от метода css('width'), он возвращает безразмерную величину (к примеру 400) и удобен при математических вычислениях. Метод получает ширину контента элемента, независимо от указания CSS-свойства box-sizing. Чтобы избежать неудобств, связанных с этим, рекомендуется использовать css('width'). Ошибки в вычислении могут также возникать, если пользователь меняет размеры страницы, а также, если элемент или его родитель скрыты. Значение ширины не учитывает значения отступов и рамки.

Синтаксис

Получить ширину элемента. В некоторых случаях полученные значения могут быть дробными:

javascript$(селектор).width();

Чтобы изменить ширину элемента - можно передать просто число (к примеру 400), тогда единицы измерения будут пиксели, либо строку, с указанием единиц измерения (к примеру '10em'):

javascript$(селектор).width(новое значение);

Также мы можем применить заданную функцию к каждому элементу в наборе. При этом первым параметром функция получит номер элемента в наборе, а вторым параметром - текущее значение заданной ширины для конкретного элемента. Значение this внутри функции будет указывать на текущий элемент. Значение ширины элемента поменяется на то, которое вернет функция:

javascript$(селектор).width(function(номер в наборе, текущее значение ширины))ж

Пример

Давайте при нажатии на div поменяем ему ширину на значение 40px, используя метод width, а также с помощью css поменяем его фон на зеленый:

html<div id="test"></div>

css#test {
  width: 90px; 
  height: 80px;
  background: red; 
  color: white;
  margin-top: 10px; 
  cursor: pointer;
}

javascript$('#test').one('click', function() {
  $(this).width(40).css({
    cursor: 'auto',
    backgroundColor: 'green'
  });
});

Смотрите также