Метады 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);