outerWidth()

посл. ред. 12.08.2016

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

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

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

jQ_object.outerWidth([флаг]) => Number: Возвращает ширину первого элемента выборки с учётом полей и границ, независимо от того, какое значение имеет свойство box-sizing. Необязательный булевый аргумент определяет, необходимо ли включать в ширину отступы. По умолчанию false (не включать).
Метод возвращает число без px в отличие от метода css('width').
Если элемент скрыт (не отображается на странице), тогда перед вычислением ширины jQuery кратковременно отображает данный элемент и снова скрывает.
Данный метод неприменим к объектам window и document.
jQ_object.outerWidth(значение) => jQuery: У каждого элемента выборки изменяет ширину содержимого с учётом полей и границ.
jQ_object.outerWidth(функция) => 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').outerWidth(220); showWidth(); return false;">outerWidth(220)</button>
  </form>
</body>
</html>
 
<script>
function showWidth() {
  $('textarea').text(
    'outerWidth(): ' + $('textarea').outerWidth() +
    '\nouterWidth(true): ' + $('textarea').outerWidth(true) +
    '\ncss("width"): ' + $('textarea').css('width')
  );
}
showWidth();
</script>