# Методы innerWidth и innerHeight в jQuery

С помощью методов `innerWidth` и `innerHeight` мы получаем ширину и высоту элементов, но уже с учетом не только контента, но и внутренних отступов - `padding`.

Давайте получим значения ширины и высоты абзаца `#test`, но уже при помощи `innerWidth` и `innerHeight`, и выведем их в другой абзац. Пусть у нас есть два абзаца:

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

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

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

В Javascript прописываем следующий код:

`let w = $('#test').innerWidth(); let h = $('#test').innerHeight(); $('#out').text('Width: ' + w + ' Height: ' + h);`

Как видите значения уже отличаются на `10px`, так как учитываются внутренние отступы, которые в нашем случае составляют по `5px` со всех сторон.

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

`$('#test1').innerWidth(250); $('#test2').innerHeight(200);`

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

←→
↑