Методы innerWidth и innerHeight в jQuery

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

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

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

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

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

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

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

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

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

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