Width metodas

Metodas width leidžia gauti ir pakeisti elemento plotį. Svarbu atsiminti, kad mes gausime 'apskaičiuotą plotį reikšmę' (computed width). Skirtingai nuo metodo css('width'), jis grąžina bematį dydį (pavyzdžiui 400) ir yra patogus atliekant matematinius skaičiavimus. Metodas gauna elemento turinio plotį, nepriklausomai nuo nurodytos CSS savybės box-sizing. Kad išvengtumėte nepatogumų, susijusių su tuo, rekomenduojama naudoti css('width'). Skaičiavimo klaidos taip pat gali atsirasti, jei naudotojas keičia puslapio dydį, taip pat, jei elementas arba jo tėvinis elementas yra paslėpti. Pločio reikšmė ne atsižvelgia į paraščių ir rėmelio reikšmes.

Sintaksė

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

$(selektorius).width();

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

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

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

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

Pavyzdys

Spustelėjus div pakeiskime jo plotį į reikšmę 40px, naudojant metodą width, o taip pat naudodami css pakeiskime jo foną į žalią:

<div id="test"></div>

#test {
	width: 90px; 
	height: 80px;
	background: red; 
	color: white;
	margin-top: 10px; 
	cursor: pointer;
}

$('#test').one('click', function() {
	$(this).width(40).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

Taip pat žiūrėkite

metodas height,
kuris leidžia gauti ir pakeisti elemento aukštį
metodas innerWidth,
kuris leidžia gauti ir pakeisti elemento plotį, atsižvelgdamas į jo vidinius tarpus
metodas outerWidth,
kuris leidžia gauti ir pakeisti elemento plotį, atsižvelgdamas į jo tarpus ir rėmelį
metodas css,
kuris leidžia gauti ir pakeisti CSS stilius elemento