Phương thức outerHeight

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 bên trong, đường viền và tùy chọn - phần lề bên ngoài của phần tử. Đ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ể xảy ra, nếu người dùng thay đổi kích thước trang, và cũng nếu phần tử hoặc phần tử cha của nó bị ẩn.

Cú pháp

Đây là cách chúng ta có thể lấy chiều cao của phần tử. Phương thức này có thể chấp nhận một tham số tùy chọn dưới dạng true hoặc false (false là mặc định), tùy thuộc vào việc có tính đến phần lề bên ngoài hay không. Trong một số trường hợp giá trị nhận được có thể là số thập phân:

$(selector).outerWidth([bao_gồm_margin]);

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

$(selector).outerHeight(giá trị mới, [bao_gồm_margin]);

Chúng ta cũng có thể áp dụng một hàm đã chỉ định cho mỗi phần tử trong tập hợp. Trong trường hợp này, 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 - giá trị chiều cao hiện tại đã đặt cho phần tử cụ thể đó. this bên trong hàm sẽ trỏ đế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).outerHeight(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ằng các phương thức height, innerHeight và outerHeight:

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

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

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();
let h3 = $('#test').outerHeight();
let h4 = $('#test').outerHeight(true);

$('#out1').text(h1);
$('#out2').text(h2);
$('#out3').text(h3);
$('#out4').text(h4);

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 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ó