Thuộc tính offsetHeight của phần tử DOM HTML

Định nghĩa và cách sử dụng

offsetHeight Thuộc tính trả về chiều cao nhìn thấy được của phần tử (đơn vị là pixel), bao gồm khoảng cách, viền và thanh cuộn, nhưng không bao gồm khoảng cách bên ngoài.

offsetHeight Thuộc tính là chỉ đọc.

Xem thêm:Hướng dẫn CSS khung cảnh

offsetParent

Tất cả các phần tử khối đều báo cáo giá trị dịch chuyển tương đối với bậc cha có vị trí dịch chuyển:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Bậc cha có vị trí dịch chuyển là bậc cha gần nhất có vị trí dịch chuyển không phải là tĩnh.

Nếu không tồn tại bậc cha có vị trí dịch chuyển, thì giá trị dịch chuyển là tương đối với văn bản chính của tài liệu.

Xem thêm:

Thuộc tính offsetWidth

Thuộc tính offsetParent

Thuộc tính offsetTop

Thuộc tính offsetLeft

Thuộc tính clientTop

Thuộc tính clientLeft

Thuộc tính clientWidth

Thuộc tính clientHeight

Mô hình

Ví dụ 1

Hiển thị chiều cao và độ rộng của "myDIV", bao gồm khoảng cách và viền:

const elmnt = document.getElementById("myDIV");
let text = "Chiều cao với khoảng cách và viền: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

Thử ngay

Ví dụ 2

Sự khác biệt giữa clientHeight/clientWidth và offsetHeight/offsetWidth

Có thanh cuộn:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

Thử ngay

Không có thanh cuộn:

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

Thử ngay

Cú pháp

element.offsetHeight

Giá trị trả về

Loại Mô tả
Số Chiều cao hiển thị của phần tử (theo pixel), bao gồm lề trong, viền và thanh cuộn.

Hỗ trợ trình duyệt

Tất cả các trình duyệt đều hỗ trợ element.offsetHeight:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ