Справочник API
.innerWidth() в jQuery
Содержание статьи
-
Категории: CSS, Dimensions, Manipulation › Style Properties
Вычисляет текущее значение ширины первого элемента в наборе jQuery вместе с внутренними отступами (полями) padding, но без учета границ border.
Синтаксис и описание:
Добавлено в jQuery 1.2.6.innerWidth( )
Добавлено в jQuery 1.8.innerWidth( value )
Добавлено в jQuery 1.8.innerWidth( function( index, width ) )
Команда .innerWidth() — то же самое, что .innerHeight(), но для ширины: как геттер возвращает ширину первого элемента набора вместе с
padding, но безborderиmargin; как сеттер (с jQuery 1.8) задаёт такую ширину содержимого, чтобы итог вместе с padding равнялся переданному значению.
Возвращаемое значение: (число | объект) Геттер — число (пиксели, без "px"); сеттер — набор jQuery.
Параметры:
value – (строка | число, с jQuery 1.8) Новое значение ширины с учётом padding.
function( index, width ) – (функция, с jQuery 1.8) Возвращает новое значение; получает индекс элемента и его текущую innerWidth.
Примечание:
Полная сводная таблица по всем методам измерения ширины и высоты — на странице .innerHeight(). Коротко:
.width()— только содержимое,.innerWidth()— плюс padding,.outerWidth()— плюс border,.outerWidth(true)— плюс margin.Примечание:
Как и .innerHeight(), метод неприменим к window и document — там уместнее
.width(). Для пустого набора геттер возвращаетundefined(до jQuery 3.0 —null).В jQuery 3.x и 4.0:
Поведение не менялось. Правила автоматического
pxиз jQuery 4.0 (см. .css()) на .innerWidth() не распространяются — сеттер сам управляет единицами измерения.
Примеры:
Получить и задать ширину с учётом padding.
// .box { padding: 0 15px; border: 3px solid; width: 200px; box-sizing: content-box; } var innerW = $('.box').innerWidth(); // 200 + 15 + 15 = 230 $('.box').innerWidth(250);Функция для пересчёта ширины набора одинаковых колонок.
$('.col').innerWidth(function(index, oldWidth) { return oldWidth - 10; // уменьшить внутреннюю ширину каждой колонки на 10px });