jQuery-də innerWidth və innerHeight metodları

innerWidth və innerHeight metodları vasitəsilə biz elementlərin enini və hündürlüyünü yalnız məzmunu deyil, həm də daxili boşluqları - padding-ni nəzərə alaraq əldə edirik.

Gəlin #test abzasının en və hündürlük dəyərlərini innerWidth və innerHeight köməyi ilə əldə edək və onları başqa bir abzasa çıxaraq. Tutaq ki, bizim iki abzasımız var:

<p id="test">text</p>
<p id="out"></p>

CSS belə görünür:

p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}

Javascript-də aşağıdakı kodu yazırıq:

let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('En: ' + w + ' Hündürlük: ' + h);

Gördüyünüz kimi dəyərlər artıq 10px fərqlənir, çünki daxili boşluqlar nəzərə alınır, hansı ki, bizim vəziyyətimizdə hər tərəfdən 5px təşkil edir.

Həmçinin, innerWidth və innerHeight metodları vasitəsilə biz asanlıqla elementlərin en və hündürlük dəyərlərini dəyişə bilərik. Məsələn, gəlin #test1 divinin enini 250px, #test2-nin hündürlüyünü isə 200px təyin edək:

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

Birinci məsələnin həllini tamamlayın - #wrapper divinin altındakı ikinci abzasa #wrapper divinin en və hündürlük dəyərlərini, bu dəfə isə xarici boşluqlar və sərhədlər nəzərə alınmadan, daxili boşluqları nəzərə alaraq çıxarın.