jQuery метод .innerWidth()

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

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

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

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

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

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

jQuery синтаксис:

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

Синтаксис 1.0:

$( selector ).innerWidth() // метод используется без параметров

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

Синтаксис 1.0:

$( selector ).innerWidth( value )

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

Синтаксис 1.8.0:

$( selector ).innerWidth(function( index, currentValue ))

index - Integer

currentValue - Number.

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

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

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

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

$(document).ready(function () {
    var innerWidthFirst = $('.first').innerWidth() // инициализируем переменную со значением внутренней ширины элемента с классом first
    var innerWidthSecond = $('.second').innerWidth() // инициализируем переменную со значением внутренней ширины элемента с классом second
    $('.first').text('content-box' + innerWidthFirst) // добавляем текстовое содержимое элементу с классом first
    $('.second').text('border-box' + innerWidthSecond) // добавляем текстовое содержимое элементу с классом 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 метода .innerWidth() инициализируем переменные, которые содержат значением внутренней ширины элемента с классом first и с классом second. После этого с использованием метода .text() добавляем эти значения внутри элементов с классом first и с классом second.

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

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

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

$(document).ready(function () {
    var innerWidthFirst = $('.first').innerWidth()
    var innerWidthSecond = $('.second').innerWidth()
    $('.first').text('content-box ' + innerWidthFirst)
    $('.second').text('border-box ' + innerWidthSecond)

    $('button').click(function () {
        $('.first').innerWidth(150)
        $('.second').innerWidth(150)
        innerWidthFirst = $('.first').innerWidth()
        innerWidthSecond = $('.second').innerWidth()
        $('.first').text('content-box ' + innerWidthFirst)
        $('.second').text('border-box ' + innerWidthSecond)
    })
})

.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 метода .innerWidth() инициализируем переменные, которые содержат значением внутренней ширины элемента с классом first и с классом second. После этого с использованием метода .text() добавляем эти значения внутри элементов с классом first и с классом second.

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

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

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

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

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

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