# Методы width и height в jQuery

Методы `width` и `height` получают, соответсвенно, ширину и высоту контента элемента без учета `padding`, `border` и `margin`.

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

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

CSS стиль абзаца выглядит так:

`p { margin: 10px; padding: 5px; }`

Теперь прописываем Javascript код:

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

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

`$('#test1').width(250); $('#test2').height(200);`

У нас есть такая верстка:

`<div id="wrapper"> <div id="test">text</div> </div> <p id="one"></p> <p id="two"></p> <p id="three"></p> <p id="four"></p>`

Следующие стили CSS:

`div { margin: 10px; padding: 5px; border: 2px solid green; } #wrapper { border-color: blueviolet; }`

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

← →
↑