width әдісі

width әдісі элементтің енін алуға және өзгертуге мүмкіндік береді. Енін 'есептелген мән' ретінде (computed width) алатынымызды есте сақтау маңызды. css('width') әдісінен айырмашылығы, ол өлшемсіз шаманы қайтарады (мысалы 400) және математикалық есептеулер үшін ыңғайлы. Әдіс CSS-қасиеті box-sizing көрсетілгеніне қарамастан, элементтің мазмұнының енін алады. Осыған байланысты ыңғайсыздықтарды болдырмау үшін css('width') қолдану ұсынылады. Есептеу кезіндегі қателер пайдаланушы беттің өлшемін өзгерткенде, сондай-ақ элемент немесе оның ата-анасы жасырын болған кезде пайда болуы мүмкін. Ен мәні шегіністер мен жиектің мәндерін есепке алмайды.

Синтаксис

Элементтің енін алу. Кейбір жағдайларда алынған мәндер бөлшек сандар болуы мүмкін:

$(селектор).width();

Элементтің енін өзгерту үшін - жай санды (мысалы 400) беруге болады, онда өлшем бірліктері пиксель болады, немесе өлшем бірліктерін көрсететін жолды (мысалы '10em') беруге болады:

$(селектор).width(жаңа мән);

Сондай-ақ біз берілген функцияны жиынның әрбір элементіне қолдана аламыз. Бұл ретте функция бірінші параметр ретінде жиындағы элементтің нөмірін алады, ал екінші параметр ретінде - нақты элементтің енінің ағымдағы мәнін алады. Функция ішіндегі this мәні ағымдағы элементке сілтеме жасайды. Элементтің ен мәні функция қайтарған мәнге өзгереді:

$(селектор).width(function(жиындағы нөмір, енінің ағымдағы мәні));

Мысал

div-ге басқан кезде оның енін 40px мәніне өзгертейік, width әдісін қолданып, сонымен қатар css арқылы оның фонын жасыл түске өзгертейік:

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

Сондай-ақ қараңыз

height әдісі,
элементтің биіктігін алуға және өзгертуге мүмкіндік береді
innerWidth әдісі,
элементтің ішкі шегіністерін есепке ала отырып, енін алуға және өзгертуге мүмкіндік береді
outerWidth әдісі,
элементтің шегіністері мен жиегін есепке ала отырып, енін алуға және өзгертуге мүмкіндік береді
css әдісі,
элементтің CSS стильдерін алуға және өзгертуге мүмкіндік береді