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('Լայնություն՝ ' + w + ' Բարձրություն՝ ' + h);

Ինչպես տեսնում եք, արժեքներն արդեն տարբերվում են 10px-ով, քանի որ հաշվի են առնվում ներքին տարածությունները, որոնք մեր դեպքում բոլոր կողմերից կազմում են 5px։

Նաև innerWidth և innerHeight մեթոդների օգնությամբ մենք կարող ենք փոխել տարրերի լայնության և բարձրության արժեքները։ Օրինակ, եկեք #test1 դիվի լայնությունը դարձնենք 250px, իսկ #test2 դիվի բարձրությունը՝ 200px․

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

Լրացրեք առաջին առաջադրանքի լուծումը՝ ցուցադրեք #wrapper դիվի տակ գտնվող երկրորդ պարագրաֆում #wrapper դիվի լայնության և բարձրության արժեքները, այս անգամ հաշվի առնելով ներքին տարածությունները, բայց առանց հաշվի առնելու եզրագծերն ու արտաքին տարածությունները։