მეთოდი 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 სტილები