Метод innerWidth
Метод innerWidth
позволяет получать
и изменять ширину элемента с учетом его внутренних
отступов. Важно помнить, что мы
будем получать 'вычисленное значение' ширины
(англ. computed width).
Ошибки в вычислении могут также возникать, если
пользователь меняет размеры страницы, а также, если
элемент или его родитель скрыты. Значение ширины не
учитывает толщину границы элемента.
Синтаксис
Получить ширину элемента. В некоторых случаях полученные значения могут быть дробными:
$(селектор).innerWidth();
Чтобы изменить ширину элемента - можно передать просто
число (к примеру 400
), тогда единицы
измерения будут пиксели, либо строку,
с указанием единиц измерения (к примеру
'10em'
):
$(селектор).innerWidth(новое значение);
Также мы можем применить заданную функцию к каждому
элементу в наборе. При этом первым параметром функция
получит номер элемента в наборе, а вторым параметром
- текущее значение заданной ширины для конкретного
элемента. Значение this
внутри функции будет
указывать на текущий элемент.
Значение ширины элемента поменяется на то,
которое вернет функция:
$(селектор).innerWidth(function(номер в наборе, текущее значение ширины));
Пример
Давайте для сравнения выведем информацию о
ширине абзаца #test
, полученной методами
width
и innerWidth
:
<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
let w1 = $('#test').width();
let w2 = $('#test').innerWidth();
$('#out1').text(w1);
$('#out2').text(w2);
Мы увидим разницу в 10px
, что является суммой
наших левого и правого внутренних отступов.
Смотрите также
-
метод
width
,
который позволяет получать и изменять ширину элемента -
метод
outerWidth
,
который позволяет получать и изменять ширину элемента, учитывая его отступы и границу