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

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

offsetWidth Thuộc tính trả về chiều rộng hiển thị của phần tử (bằng pixel), bao gồm lề, viền và thanh cuộn, nhưng không bao gồm lề ngoài.

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

Xin xem thêm:Hướng dẫn CSS khung

offsetParent

Tất cả các phần tử khối đều báo cáo giá trị offset so với bậc cha có offset:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Bậc cha có offset là bậc cha gần nhất có vị trí không phải là static.

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

Xin xem thêm:

Thuộc tính offsetHeight

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

Thực tế

Ví dụ 1

Lấy chiều cao và chiều rộng của "myDIV", bao gồm lề và viền:

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

Thử trực tiếp

Ví dụ 2

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";

Thử trực tiếp

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ử trực tiếp

Cú pháp

element.offsetWidth

Giá trị trả về

Loại Mô tả
Số Bề rộng hiển thị của phần tử (bằng 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.offsetWidth:

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