Metodas innerWidth

Metodas innerWidth leidžia gauti ir keisti elemento plotį, atsižvelgiant į jo vidinius tarpus. Svarbu atsiminti, kad mes gausime 'apskaičiuotą plotį' (computed width). Skaičiavimo klaidos taip pat gali atsirasti, jei vartotojas keičia puslapio dydį, taip pat jei elementas arba jo tėvinis elementas yra paslėpti. Pločio reikšmė neatsižvelgia į elemento sienelės storį.

Sintaksė

Gauti elemento plotį. Kai kuriais atvejais gautos reikšmės gali būti trupmeninės:

$(selektorius).innerWidth();

Norint pakeisti elemento plotį - galima perduoti tiesiog skaičių (pavyzdžiui 400), tada matavimo vienetai bus pikseliai, arba eilutę, nurodančią matavimo vienetus (pavyzdžiui '10em'):

$(selektorius).innerWidth(nauja reikšmė);

Taip pat galime pritaikyti nurodytą funkciją kiekvienam elementui rinkinyje. Tuo pačiu metu pirmuoju parametru funkcija gaus elemento numerį rinkinyje, o antruoju parametru - dabartinę nurodyto pločio reikšmę konkrečiam elementui. Reikšmė this funkcijos viduje rodys į dabartinį elementą. Elemento pločio reikšmė pasikeis į tą, kurią grąžins funkcija:

$(selektorius).innerWidth(function(numeris rinkinyje, dabartinė pločio reikšmė));

Pavyzdys

Palyginimui išveskime informaciją apie antro plano #test pločio, gauto metodais width ir innerWidth:

<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>

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

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();

$('#out1').text(w1);
$('#out2').text(w2);

Pamatysime 10px skirtumą, kuris yra mūsų kairiojo ir dešiniojo vidinių tarpų suma.

Žiūrėkite taip pat

metodas width,
kuris leidžia gauti ir keisti elemento plotį
metodas outerWidth,
kuris leidžia gauti ir keisti elemento plotį, atsižvelgiant į jo tarpus ir sienelę