width()

посл. ред. 12.08.2016

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

Значение ширины должно указываться в виде строки или числа. Если значение передано в виде числа, тогда оно автоматически конвертируется в строку и к нему добавляется px.

Варианты использования

jQ_object.width() => Number: Возвращает ширину первого элемента выборки без учёта полей, границ и отступов, независимо от того, какое значение имеет свойство box-sizing.
Метод возвращает число без px в отличие от метода css('width').
Если элемент скрыт (не отображается на странице), тогда перед вычислением ширины jQuery кратковременно отображает данный элемент и снова скрывает.
Данный метод применим к объектам window и document.
jQ_object.width(значение) => jQuery: У каждого элемента выборки изменяет ширину содержимого, то есть без учёта полей, границ и отступов.
jQ_object.width(функция) => jQuery: У каждого элемента выборки изменяет ширину на новое значение, возвращённое указанной функцией. Данная функция выполняется для каждого элемента выборки отдельно.
При запуске функции первым аргументом передаётся индекс элемента в выборке. Вторым аргументом передаётся текущая ширина данного элемента. Ссылка на сам элемент хранится в переменной this.

Примеры

<html>
<head>
  <title>Работа с элементами DOM</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <style>
    .cl {
      width: 200px;
      height: 100px;
      margin: 10px;
      padding: 10px;
      border: 2px solid red;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <form autocomplete="off">
    <textarea class="cl"></textarea>
    <br>
    <button onclick="$('textarea').width(200); showWidth(); return false;">width(200)</button>
  </form>
</body>
</html>
 
<script>
function showWidth() {
  $('textarea').text(
    'width(): ' + $('textarea').width() +
    '\ncss("width"): ' + $('textarea').css('width')
  );
}
showWidth();
</script>