Phương thức height

Phương thức height cho phép lấy và thay đổi chiều cao của phần tử. Điều quan trọng cần nhớ là, chúng ta sẽ nhận được 'giá trị đã tính toán' của chiều cao (computed height). Không giống với phương thức css('height'), nó trả về một giá trị không có đơn vị (ví dụ 400) và tiện lợi cho các phép tính toán. Phương thức này lấy chiều cao nội dung của phần tử, không phụ thuộc vào việc thiết lập thuộc tính CSS box-sizing. Để tránh các phép tính không cần thiết, nên sử dụng css('height'). 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, hoặc nếu phần tử hoặc phần tử cha của nó bị ẩn. Giá trị chiều cao không tính đến giá trị của phần đệm (padding) và viền (border).

Cú pháp

Lấy chiều cao 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).height();

Để thay đổi chiều cao của phần tử - có thể truyền vào 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).height(giá trị mới);

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

Giá trị chiều cao của phần tử sẽ thay đổi thành giá trị mà hàm trả về:

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

Ví dụ

Hãy thay đổi chiều cao của #test thành giá trị 30px khi nhấp vào nó, sử dụng phương thức height, và đồng thời sử dụng css để thay đổi nền của nó thành màu xanh lá cây:

<div id="test"></div>

#test {
	width: 50px;
	height: 90px;
	background: red;
	color: white;
	margin-top: 10px;
	cursor: pointer;
}

$('#test').one('click', function() {
	$(this).height(30).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

Xem thêm

phương thức width,
cho phép lấy và thay đổi chiều rộng của phần tử
phương thức innerHeight,
cho phép lấy và thay đổi chiều cao của phần tử, có tính đến phần đệm (padding) bên trong của nó
phương thức outerHeight,
cho phép lấy và thay đổi chiều cao của phần tử, có tính đến phần đệm (padding) và viền (border) 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ử