Phương thức innerHeight

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 bên trong của nó. Điều quan trọng cần nhớ là chúng ta sẽ nhận được 'giá trị được tính toán' của chiều cao (computed height). Lỗi trong tính toán cũng có thể phát sinh 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 độ dày đường viền của phần tử.

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:

$(bộ chọn).innerHeight();

Để 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'):

$(bộ chọn).innerHeight(giá trị mới);

Chúng ta cũng có thể áp dụng một hàm được chỉ định cho từng 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, và tham số thứ hai - giá trị chiều cao hiện tại được đặt 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ề:

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

Ví dụ

Hãy so sánh và hiển thị thông tin về chiều cao của đoạn văn #test, được lấy bởi các phương thức height và innerHeight:

<p id="test">văn bản</p>
<p id="out1"></p>
<p id="out2"></p>

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();

$('#out1').text(h1);
$('#out2').text(h2);

Chúng ta sẽ thấy sự khác biệt là 10px, đây là tổng phần đệm trên và dưới bên trong của chúng ta.

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 outerHeight,
cho phép lấy và thay đổi chiều cao của phần tử, có tính đến phần đệm và đường viền của nó