Meetod width

Meetod width võimaldab saada ja muuta elemendi laiust. Oluline on meeles pidada, et me saame 'arvutatud laiuse väärtuse' (computed width). Erinevalt meetodist css('width'), tagastab see mõõtmeteta väärtuse (näiteks 400) ja on mugav matemaatilistes arvutustes. Meetod saab elemendi sisu laiuse, sõltumata CSS-omaduse box-sizing määramisest. Et vältida sellega seotud ebamugavusi, on soovitatav kasutada css('width'). Arvutusvead võivad tekkida ka siis, kui kasutaja muudab lehe suurust, samuti kui element või selle vanem on peidetud. Laiuse väärtus ei arvesta paddingute ja raami väärtusi.

Süntaks

Elemendi laiuse saamine. Mõnel juhul võivad saadud väärtused olla murdarvud:

$(selector).width();

Elemendi laiuse muutmiseks - saab edastada lihtsalt arvu (näiteks 400), siis mõõtühik on pikslid, või stringi, määrates mõõtühikud (näiteks '10em'):

$(selector).width(uus väärtus);

Samuti saame rakendada antud funktsiooni igale elemendile komplektis. Sel juhul saab funktsioon esimese parameetrina elemendi numbri komplektis ja teise parameetrina - praeguse laiuse väärtuse konkreetse elemendi jaoks. Väärtus this funktsiooni sees viitab praegusele elemendile. Elemendi laius muutub selleks, mille funktsioon tagastab:

$(selector).width(function(number komplektis, praegune laiuse väärtus));

Näide

Muudame div-l klikkimisel selle laiuse väärtusele 40px, kasutades meetodit width, ning samuti kasutades css muudame selle tausta roheliseks:

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

Vaata ka

meetod height,
mis võimaldab saada ja muuta elemendi kõrgust
meetod innerWidth,
mis võimaldab saada ja muuta elemendi laiust, arvestades selle sisemisi paddinguid
meetod outerWidth,
mis võimaldab saada ja muuta elemendi laiust, arvestades selle paddinguid ja piiri
meetod css,
mis võimaldab saada ja muuta elemendi CSS stiile