Методы outerWidth и outerHeight в jQuery

Последняя пара методов - outerWidth и outerHeight, с помощью которых возможно получить ширину и высоту элемента с учетом всех отступов и границ, а можно не учитывать внешние отступы margin.

Рассмотрим пример. Пусть у нас есть абзац:

html<p id="test">text</p>
<p id="out"></p>

CSS выглядит так:

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

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

javascriptlet w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

Теперь наши значения будут отличаться еще на 4px, поскольку толщина границ по 2px с каждой стороны.

А теперь давайте получим значения ширины и высоты абзаца #test, учитывая все отступы и границы, для этого в методы outerWidth и outerHeight необходимо передать true:

javascriptlet w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);

Теперь наши значения будут отличаться от предыдущих еще на 20px, поскольку внешние отступы у нас по 10px с каждой стороны.

Задание 1

Дополните решение предыдущих задач - выведите в третий абзац под дивом #wrapper значения ширины и высоты дива #wrapper - с учетом внутренних отступов и границ, но без внешних отступов. В четвертый абзац выведите значения ширины и высоты дива #wrapper с учетом всех отступов и границ.

Также с помощью методов outerWidth и outerHeight мы можем изменить значения ширины и высоты элементов. Например, давайте поставим ширину дива #test1 равной 250px, а высоту #test2 - 200px:

javascript$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

Все указанные методы работы с размерами элемента также предусматривают возможность применения функции к каждому элементу в наборе.