Метод outerWidth

Метод outerWidth позволяет получать и изменять ширину элемента с учетом внутренних отступов, границы и выборочно - внешних отступов элемента. Важно помнить, что мы будем получать 'вычисленное значение' ширины (computed width). Ошибки в вычислении могут также возникать, если пользователь меняет размеры страницы, а также, если элемент или его родитель скрыты.

Синтаксис

Так мы можем получить ширину элемента. Этот метод может принимать необязательный параметр в виде true или false (false стоит по умолчанию), в зависимости от того - будут учитываться внешние отступы или нет. В некоторых случаях полученные значения могут быть дробными:

javascript$(селектор).outerWidth([включая_margin]);

Чтобы изменить ширину элемента - можно передать просто число (к примеру 400), тогда единицы измерения будут пиксели, либо строку, с указанием единиц измерения (к примеру '10em'):

javascript$(селектор).outerWidth(новое значение, [включая_margin]);

Также мы можем применить заданную функцию к каждому элементу в наборе. При этом первым параметром функция получит номер элемента в наборе, а вторым параметром - текущее значение заданной ширины для конкретного элемента. this внутри функции будет указывать на текущий элемент. Значение ширины элемента поменяется на то, которое вернет функция:

javascript$(селектор).outerWidth(function(номер в наборе, текущее значение ширины));

Пример

Давайте для сравнения выведем информацию о ширине абзаца #test, полученной методами width, innerWidth и outerWidth:

html<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

cssp {
  margin: 10px;
  padding: 5px;
  border: 2px solid blue;
}

javascriptlet 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);

Смотрите также