Метод 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 стилларини олиш ва ўзгартириш имконини беради