Усулҳои innerWidth ва innerHeight дар jQuery

Бо ёрии усулҳои 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-ро бароед, ин дафъа бо назардошти пардохтҳои дохилӣ, аммо бе назардошти сарҳадҳо ва пардохтҳои берунӣ.