jQuery-da innerWidth we innerHeight metodlary

innerWidth we innerHeight metodlary bilen biz elementleriň ini we beýikligini alyarys, ýöne diňe mazmuny däl, eýsem içindäki boşluklary - padding hem göz öňünde tutup.

Geliň, #test abzasynyň ini we beýiklik bahalaryny innerWidth we innerHeight kömegi bilen alyp, beýleki abzasa çykaryň. Bizde iki abzas bolsun:

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

CSS şeýle görünýär:

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

Javascript-de aşakdaky kody ýazýarys:

let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Ini: ' + w + ' Beýikligi: ' + h);

Görşüňiz ýaly, bahalar indi 10px tapawutlanýar, sebäbi içindäki boşluklar hasaba alynýar, bizim ýagdaýymyzda äher tarapdan 5px.

Şeýle hem, innerWidth we innerHeight metodlary bilen biz elementleriň ini we beýiklik bahalaryny üýtgedip bileris. Mysal üçin, #test1 diwiniň ini 250px, #test2 diwiniň beýikligini bolsa 200px edeliň:

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

Birinci meseläniň çözgüdini dolduryň - #wrapper diwiniň aşagyndaky ikinji abzasa, #wrapper diwiniň ini we beýiklik bahalaryny çykaryň, bu gezek içindäki boşluklary göz öňünde tutup, ýöne serhedler we daşarky boşluklar hasaba alınmazdan.