Phương thức width

Phương thức width cho phép lấy và thay đổi chiều rộng của phần tử. Quan trọng là phải nhớ rằng chúng ta sẽ nhận được 'giá trị được tính toán' của chiều rộng (computed width). Không giống như phương thức css('width'), nó trả về một đại lượng không có đơn vị (ví dụ 400) và thuận tiện cho các phép tính toán học. Phương thức lấy chiều rộng nội dung của phần tử, bất kể việc chỉ định thuộc tính CSS box-sizing. Để tránh những bất tiện liên quan đến điều này, nên sử dụng css('width'). Lỗi trong tính toán cũng có thể xảy ra, nếu người dùng thay đổi kích thước trang, cũng như nếu phần tử hoặc phần tử cha của nó bị ẩn. Giá trị chiều rộng không tính đến giá trị của khoảng đệm và đường viền.

Cú pháp

Lấy chiều rộng của phần tử. Trong một số trường hợp giá trị nhận được có thể là số thập phân:

$(selector).width();

Để thay đổi chiều rộng của phần tử - có thể truyền một số (ví dụ 400), khi đó đơn vị đo sẽ là pixel, hoặc một chuỗi, với chỉ định đơn vị đo (ví dụ '10em'):

$(selector).width(giá trị mới);

Chúng ta cũng có thể áp dụng một hàm đã cho cho mỗi phần tử trong tập hợp. Khi đó tham số đầu tiên hàm sẽ nhận được số thứ tự của phần tử trong tập hợp, còn tham số thứ hai là giá trị hiện tại của chiều rộng đã đặt cho phần tử cụ thể đó. Giá trị this bên trong hàm sẽ chỉ đến phần tử hiện tại. Giá trị chiều rộng của phần tử sẽ thay đổi thành giá trị mà hàm trả về:

$(selector).width(function(số thứ tự trong tập hợp, giá trị chiều rộng hiện tại));

Ví dụ

Hãy khi nhấn vào div thay đổi chiều rộng của nó thành giá trị 40px, sử dụng phương thức width, đồng thời với sự trợ giúp của css thay đổi nền của nó thành màu xanh lá cây:

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

Xem thêm

phương thức height,
cho phép lấy và thay đổi chiều cao của phần tử
phương thức innerWidth,
cho phép lấy và thay đổi chiều rộng của phần tử, tính cả khoảng đệm bên trong của nó
phương thức outerWidth,
cho phép lấy và thay đổi chiều rộng của phần tử, tính cả khoảng đệm và đường viền của nó
phương thức css,
cho phép lấy và thay đổi các kiểu CSS của phần tử