Thuộc tính HTML DOM offsetHeight
Thí dụ
Lấy chiều cao và chiều rộng của phần tử <div>, bao gồm phần đệm và đường viền:
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
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, nhưng không phải lề.
Lý do tại sao từ "có thể xem" được chỉ định là vì nếu nội dung của phần tử cao hơn chiều cao thực của phần tử, thuộc tính này sẽ chỉ trả về chiều cao có thể nhìn thấy (Xem "Ví dụ khác").
Lưu ý: Để hiểu thuộc tính này, bạn phải hiểu CSS Box Model .
Mẹo: Thuộc tính này thường được sử dụng cùng với thuộc tính offsetWidth .
Mẹo: Sử dụng thuộc tính clientHeight và clientWidth để trả về chiều cao và chiều rộng có thể xem của một phần tử, chỉ bao gồm phần đệm.
Mẹo: Để thêm thanh cuộn vào một phần tử, hãy sử dụng thuộc tính phần bổ sung CSS .
Thuộc tính này là chỉ đọc.
Hỗ trợ trình duyệt
Property | |||||
---|---|---|---|---|---|
offsetHeight | Yes | Yes | Yes | Yes | Yes |
Cú pháp
element.offsetHeight
Chi tiết kỹ thuật
Giá trị trả lại: | Một Số, đại diện cho chiều cao có thể xem 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 |
---|
Các ví dụ khác
Thí dụ
Ví dụ này minh họa sự khác biệt giữa clientHeight / clientWidth và offsetHeight / offsetWidth:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Thí dụ
Ví dụ này minh họa sự khác biệt giữa clientHeight / clientWidth và offsetHeight / offsetWidth, khi chúng ta thêm một thanh cuộn vào phần tử:
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";