jQuery метод .outerWidth()

Определение и применение

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

Наглядное отображение использования jQuery методов .outerHeight() и .outerWidth().

Для получения текущего значения вычисленного значения внешней высоты элемента (включая внутренние отступы, границы и при необходимости внешние отступы) для первого элемента в наборе совпавших элементов, или установить внешнюю высоту каждого соответствующего элемента вы можете воспользоваться методом .outerHeight().

Если метод .outerWidth() вызывается на пустом наборе элементов, то возвращаемое значение будет undefined (до версии jQuery 3.0 значение null).

jQuery метод .outerWidth() не гарантирует точность в том случае, когда элемент, или его родитель скрыт. Чтобы получить точное значение, убедитесь, что элемент является видимым перед использованием метода. jQuery будет пытаться временно показать, а затем снова скрыть элемент для того, чтобы измерить его размеры, но в этом случае метод не является надежным, это может влиять на производительность страницы. Подобная функция измерения может быть удалена в следующей версии библиотеки jQuery.

jQuery синтаксис:

Получение значения:

Синтаксис 1.2.6:

$( selector ).outerWidth()
$( selector ).outerWidth( includeMargin ) // получение значения с внешними отступами

includeMargin - Boolean

Установка значений:

Синтаксис 1.8.0:

$( selector ).outerWidth( value )
$( selector ).outerWidth(function( index, currentValue ))

value - String (значение в произвольных единицах измерения), или Integer (значение в пикселях)

index - Integer

currentValue - Number.

Добавлен в версии jQuery

Значения параметров

Пример использования

<div class="first"></div>
<div class="second"></div>

$(document).ready(function () {
    var outerWidthFirst = $('.first').outerWidth() // инициализируем переменную со значением внешней ширины элемента с классом first
    var outerWidthFirstWithMargin = $('.first').outerWidth(true) // инициализируем переменную со значением внешней ширины элемента с классом first, включающую внешние отступы
    var outerWidthSecond = $('.second').outerWidth() // инициализируем переменную со значением внешней ширины элемента с классом second
    var outerWidthSecondWithMargin = $('.second').outerWidth(true) // инициализируем переменную со значением внешней ширины элемента с классом second, включающую внешние отступы
    $('.first').text('content-box ' + outerWidthFirst + '/' + outerWidthFirstWithMargin) // добавляем текстовое содержимое элементу с классом first
    $('.second').text('border-box ' + outerWidthSecond + '/' + outerWidthSecondWithMargin) // добавляем текстовое содержимое элементу с классом second
})

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

.first {
  width: 100px; /* ширина элемента */
  height: 100px; /* высота элемента */
  padding: 10px; /* внутренние отступы */
  margin: 10px; /* внешние отступы */
  border: 5px solid green; /* сплошная граница размером 5 пикселей зеленого цвета */
  box-sizing: content-box; /* значения ширины и высоты не включают в себя границы (border) и внутренние отступы (padding), а только содержание элемента */
}
.second {
  width: 100px; /* ширина элемента */
  height: 100px; /* высота элемента */
  padding: 10px; /* внутренние отступы */
  margin: 10px; /* внешние отступы */
  border: 5px solid red; /* сплошная граница размером 5 пикселей красного цвета */
  box-sizing: border-box; /* значения ширины и высоты включают в себя содержание элемента, границы (border) и внутренние отступы (padding) */
}

В этом примере мы при загрузке документа с использованием jQuery метода .outerWidth() инициализируем четыре переменные, которые содержат значения внешней ширины элементов с классом first и с классом second как с внешними отступами (margin), так и без них. Обратите внимание, что для того, чтобы получить значение с внешними отступами элемента необходимо дополнительно с методом .outerWidth() передать в качестве параметра логическое значение true.

После этого с использованием метода jQuery .text() добавляем значения переменных внутри элементов с классом first и с классом second. Обратите внимание, что свойство width не включает в себя внутренние отступы, границу, или внешние отступы, если используется CSS свойство box-sizing со значением content-box (значение по умолчанию).

Рассмотрим следующий пример в котором мы как получим, так и установим значение внешней ширины:

<button>Клик</button>
<div class="first"></div>
<div class="second"></div>

$(document).ready(function () {
    var outerWidthFirst = $('.first').outerWidth()
    var outerWidthSecond = $('.second').outerWidth()
    $('.first').text('content-box ' + outerWidthFirst)
    $('.second').text('border-box ' + outerWidthSecond)

    $('button').click(function () {
        $('.first').outerWidth(150)
        $('.second').outerWidth(150)
        outerWidthFirst = $('.first').outerWidth()
        outerWidthSecond = $('.second').outerWidth()
        $('.first').text('content-box ' + outerWidthFirst)
        $('.second').text('border-box ' + outerWidthSecond)
    })
})

.first {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    border: 5px solid green;
    box-sizing: content-box;
}
.second {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    border: 5px solid red;
    box-sizing: border-box;
}

В этом примере по аналогии с предыдущим примером мы при загрузке документа с использованием jQuery метода .outerWidth() инициализируем переменные, которые содержат значения внешней ширины элемента с классом first и с классом second (внешние отступы в расчет не включаются). После этого с использованием метода .text() добавляем эти значения внутри элементов с классом first и с классом second.

Кроме того, мы разместили кнопку, при нажатии на которую, мы устанавливаем внешнюю ширину равную 150 пикселям каждому элементу. При этом зрительно мы получим один и тот же результат независимо от значения свойства box-sizing, но при этом учитывайте, что значение ширины (width) у элементов будет разным.

Рассмотрим следующий пример в котором мы передадим в качестве параметра метода .outerWidth() функцию:

<button>Клик</button><br />
<div></div>
<div></div>
<div></div>

$(document).ready(function () {
    $('button').click(function () {
        var x = $('div').outerWidth()
        $('div').outerWidth(function (index, currentOuterWidth) {
            x += 30
            return (currentOuterWidth += x)
        })
    })
})

div {
    display: inline-block;
    width: 10px;
    height: 50px;
    padding: 10px;
    margin: 10px;
    border: 1px solid orange;
    transition: 2s;
}

В этом примере мы при нажатии на кнопку передаем методу .outerWidth() функцию, которая возвращает новое значение внешней ширины и устанавливает её выбранным элементам в зависимости от их индекса. Перед каждой установкой значения, мы увеличиваем значение переменной на 30 и прибавляем его к значению внешней ширины элемента.