width Metodu

width metodu, elementlerin genişliğini almanıza ve değiştirmenize olanak tanır. Önemli olan, 'hesaplanmış genişlik' değerini (computed width) alacağımızı unutmamaktır. css('width') metodunun aksine, bu metot birimsiz bir değer döndürür (örneğin 400) ve matematiksel hesaplamalar için daha uygundur. Metot, CSS'nin box-sizing özelliğinden bağımsız olarak, elementin içerik genişliğini alır. Bununla ilişkili sorunlardan kaçınmak için css('width') kullanılması önerilir. Hesaplama hataları, kullanıcı sayfa boyutlarını değiştirdiğinde veya element veya ebeveyni gizlendiğinde de ortaya çıkabilir. Genişlik değeri, padding ve kenarlık değerlerini dikkate almaz.

Sözdizimi

Elementin genişliğini alın. Bazı durumlarda alınan değerler ondalıklı sayılar olabilir:

$(seçici).width();

Elementin genişliğini değiştirmek için - bir sayı (örneğin 400) iletebilirsiniz, bu durumda ölçü birimi piksel olacaktır, veya ölçü birimini belirten bir string (örneğin '10em') iletebilirsiniz:

$(seçici).width(yeni değer);

Ayrıca, belirtilen bir fonksiyonu set içindeki her bir elemente uygulayabiliriz. Bu durumda fonksiyon ilk parametre olarak set içindeki indeksi, ikinci parametre olarak ise ilgili elementin mevcut genişlik değerini alır. Fonksiyon içindeki this değeri mevcut elementi işaret edecektir. Elementin genişlik değeri, fonksiyonun döndürdüğü değer ile değiştirilecektir:

$(seçici).width(function(set içindeki indeks, mevcut genişlik değeri));

Örnek

Bir div'e tıklandığında, width metodunu kullanarak genişliğini 40px değerine değiştirelim ve ayrıca css kullanarak arkaplan rengini yeşil yapalım:

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

Ayrıca Bakınız

Elementlerin yüksekliğini almanıza ve değiştirmenize olanak tanıyan height metodu
Elementlerin iç padding'ini de dikkate alarak genişliğini almanıza ve değiştirmenize olanak tanıyan innerWidth metodu
Elementlerin padding ve kenarlığını da dikkate alarak genişliğini almanıza ve değiştirmenize olanak tanıyan outerWidth metodu
Elementlerin CSS stillerini almanıza ve değiştirmenize olanak tanıyan css metodu