Njia width

Njia width inaruhusu kupata na kubadilisha upana wa kipengele. Ni muhimu kukumbuka kuwa sisi tutapata 'thamani iliyokokotolewa' ya upana (computed width). Tofauti na njia css('width'), inarudisha thamani isiyo na kipimo (kwa mfano 400) na ni rahisi katika mahesabu ya hisabati. Njia hupata upana wa maudhui ya kipengele, bila kujali utajwa wa property ya CSS box-sizing. Ili uepushe usumbufu unaohusiana na hili, inapendekezwa kutumia css('width'). Makosa katika ukokotoaji yanaweza pia kutokea ikiwa mtumiaji anabadilisha ukubwa wa ukurasa, na pia, ikiwa kipengele au kizazi chake kimefichika. Thamani ya upana haijumuishi thamani za padding na mpaka.

Syntax

Pata upana wa kipengele. Katika hali nyingine thamani zilizopatikana zinaweza kuwa za sehemu:

$(kichaguzi).width();

Ilibadilisha upana wa kipengele - unaweza kupita tu nambari (kwa mfano 400), basi vitengo vya kipimo vitakuwa saizi, au mfuatano, ukiwa na utajwa wa vitengo vya kipimo (kwa mfano '10em'):

$(kichaguzi).width(thamani mpya);

Pia tunaweza kutumia kitendakazi kilichobainishwa kwa kila kipengele katika seti. Wakati huo kigezo cha kwanza kitendakazi kitapata nambari ya kipengele katika seti, na kigezo cha pili - thamani ya sasa ya upana uliowekwa kwa kipengele maalum. Thamani this ndani ya kitendakazi itakuwa inataja kipengele cha sasa. Thamani ya upana wa kipengele itabadilika kuwa ile, itakayorudishwa na kitendakazi:

$(kichaguzi).width(function(nambari katika seti, thamani ya sasa ya upana));

Mfano

Wacha kubonyeza kwenye div tubadilishe upana wake uwe thamani 40px, tukitumia njia width, na pia kwa kutumia css tubadilishe mandharinyuma yake kuwa kijani:

<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'
	});
});

Angalia pia

njia height,
inaruhusu kupata na kubadilisha urefu wa kipengele
njia innerWidth,
inaruhusu kupata na kubadilisha upana wa kipengele, kwa kuzingatia padding yake ya ndani
njia outerWidth,
inaruhusu kupata na kubadilisha upana wa kipengele, kwa kuzingatia padding na mpaka wake
njia css,
inaruhusu kupata na kubadilisha mitindo ya CSS ya kipengele