Thuộc tính chiều rộng HTML DOM offset
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 offsetWidth trả về chiều rộng có thể xem của một phần tử tính bằng pixel, bao gồm đệ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à bởi vì nếu nội dung của phần tử rộng hơn chiều rộng thực của phần tử, thì thuộc tính này sẽ chỉ trả về chiều rộng có thể nhìn thấy được (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 offsetHeight .
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 | |||||
|---|---|---|---|---|---|
| offsetWidth | Yes | Yes | Yes | Yes | Yes |
Cú pháp
element.offsetWidth
Chi tiết kỹ thuật
| Giá trị trả lại: | Một Số, đại diện cho chiều rộng 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";