Phần tử DOM HTML offsetHeight
Ví dụ
Hiển thị chiều cao và chiều rộng của "myDIV", bao gồm phần đệm và đường viền:
const elmnt = document.getElementById("myDIV");
let text = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";
Hãy tự mình thử »Thêm ví dụ dưới đây.
Sự miêu tả
Thuộc tính offsetHeight
trả về chiều cao có thể xem được của một phần tử (tính bằng pixel), bao gồm phần đệm, đường viền và thanh cuộn chứ không phải lề.
Id thuộc tính offsetHeight
chỉ đọc.
Hướng dẫn:
offsetParent
Tất cả các phần tử cấp khối đều báo cáo độ lệch liên quan đến phần tử gốc bù:
- offsetTop
- offsetLeft
- offsetWidth
- bù đắpChiều cao
Cha mẹ bù đắp là tổ tiên gần nhất có vị trí không phải là vị trí tĩnh.
Nếu không có phần gốc chênh lệch nào tồn tại thì phần bù sẽ liên quan đến nội dung tài liệu.
Xem thêm:
Cú pháp
element .offsetHeight
Giá trị trả về
Kiểu | Sự miêu tả |
Con số | Chiều cao có thể xem được của phần tử (tính bằng pixel) bao gồm phần đệm, đường viền và thanh cuộn. |
Sự khác biệt giữa clientHeight/clientWidth và offsetHeight/offsetWidth
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 and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";
Hãy tự mình thử »Với 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";
Hãy tự mình thử »Hỗ trợ trình duyệt
element.offsetHeight
được hỗ trợ trong tất cả các trình duyệt:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | Yes |