Width методу

width методу элементдин туурасын алууга жана өзгөртүүгө мүмкүндүк берет. Маанилүү эскертүү, биз тууранын 'эсептелген маанисин' алабыз (computed width). css('width') методунан айырмаланып, ал өлчөмсүз чоңдукту кайтарат (мисалы 400) жана математикалык эсептөөлөрдө ыңгайлуу. Метод элементдин мазмунунун туурасын алат, box-sizing CSS касиети көрсөтүлсө дагы. Ушуга байланышкан ыңгайсыздыктардан качуу үчүн, 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 стилдерин алууга жана өзгөртүүгө мүмкүндүк берет