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