С помощью методов 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, на
этот раз с учетом внутренних отступов, но без
учета границ и внешних отступов.