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 სიგანის და სიმაღლის მნიშვნელობები, ამჯერად შიდა ველების გათვალისწინებით, მაგრამ გარე საზღვრების და გარე ველების გათვალისწინების გარეშე.