Metode width

Metode width ļauj iegūt un mainīt elementa platumu. Svarīgi atcerēties, ka mēs iegūsim 'aprēķināto platuma vērtību' (computed width). Atšķirībā no metodes css('width'), tā atgriež bezdimensiju vērtību (piemēram, 400) un ir ērta matemātiskiem aprēķiniem. Metode iegūst elementa satura platumu, neatkarīgi no CSS īpašības box-sizing norādīšanas. Lai izvairītos no neērtībām, kas saistītas ar to, ieteicams izmantot css('width'). Aprēķinu kļūdas var rasties arī tad, ja lietotājs maina lapas izmērus, kā arī, ja elements vai tā vecāks elements ir paslēpts. Platuma vērtība neņem vērā atkāpju un apmales vērtības.

Sintakse

Iegūt elementa platumu. Dažos gadījumos iegūtās vērtības var būt daļskaitļi:

$(selektors).width();

Lai mainītu elementa platumu - var padot vienkārši skaitli (piemēram, 400), tad mērvienības būs pikseļi, vai virkni, ar mērvienību norādi (piemēram, '10em'):

$(selektors).width(jaunā vērtība);

Mēs varam arī piemērot noteiktu funkciju katram elementam kopā. Šajā gadījumā pirmais parametrs funkcijai saņems elementa numuru kopā, bet otrais parametrs - pašreizējo norādītā platuma vērtību konkrētajam elementam. Vērtība this funkcijas iekšienē būs norāde uz pašreizējo elementu. Elementa platuma vērtība mainīsies uz to, ko atgriež funkcija:

$(selektors).width(function(numurs kopā, pašreizējā platuma vērtība));

Piemērs

Kad noklikšķinām uz div, mainīsim tam platumu uz vērtību 40px, izmantojot metodi width, kā arī ar css palīdzību mainīsim tā fona krāsu uz zaļu:

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

Skatiet arī

metode height,
kas ļauj iegūt un mainīt elementa augstumu
metode innerWidth,
kas ļauj iegūt un mainīt elementa platumu, ņemot vērā tā iekšējās atkāpes
metode outerWidth,
kas ļauj iegūt un mainīt elementa platumu, ņemot vērā tā atkāpes un apmali
metode css,
kas ļauj iegūt un mainīt elementa CSS stilus