# Методы 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);`

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

← →
↑