Методи 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,
този път като се вземат предвид вътрешните отстъпи, но без
да се вземат предвид границите и външните отстъпи.
