jQueryдеги innerWidth жана innerHeight ыкмалары

innerWidth жана innerHeight ыкмаларынын жардамы менен биз элементтердин туурасын жана бийиктигин алабыз, бирок бул жолу тек контент эмес, ошондой эле ички жылдырымдарды - padding - эсепке алат.

Келгиле, #test абзацынын туура жана бийик маанилерин innerWidth жана innerHeight жардамы менен алып, аны башка абзацка чыгаралы. Бизде эки абзац бар дейли:

<p id="test">текст</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 дивинин туура жана бийик маанилерин чыгарыңыз, бул жолу чектерди жана тышкы жылдырымдарды эске албастан, бирок ички жылдырымдарды эске алып.