Методы outerWidth и outerHeight в jQuery
Последняя пара методов - outerWidth и
outerHeight, с помощью которых возможно получить
ширину и высоту элемента с учетом всех отступов и границ,
а можно не учитывать внешние отступы margin.
Рассмотрим пример. Пусть у нас есть абзац:
<p id="test">text</p>
<p id="out"></p>
CSS выглядит так:
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
Давайте получим значения ширины и высоты абзаца
#test, учитывая внутренние отступы и границы,
для этого в эти методы необходимо передать
false или оставить скобочки пустыми (так как
оно уже стоит в методе по умолчанию):
let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);
Теперь наши значения будут отличаться еще на 4px,
поскольку толщина границ по 2px с каждой стороны.
А теперь давайте получим значения ширины и высоты абзаца
#test, учитывая все отступы и границы,
для этого в методы outerWidth и outerHeight
необходимо передать true:
let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);
Теперь наши значения будут отличаться от предыдущих
еще на 20px, поскольку внешние отступы у нас
по 10px с каждой стороны.
Дополните решение предыдущих задач - выведите
в третий абзац под дивом #wrapper
значения ширины и высоты дива #wrapper -
с учетом внутренних отступов и границ, но без
внешних отступов. В четвертый абзац выведите
значения ширины и высоты дива #wrapper
с учетом всех отступов и границ.
Также с помощью методов outerWidth и
outerHeight мы можем
изменить значения ширины и высоты элементов.
Например, давайте поставим ширину дива #test1
равной 250px, а высоту #test2 - 200px:
$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);
Все указанные методы работы с размерами элемента также предусматривают возможность применения функции к каждому элементу в наборе.