Trả về chiều rộng của vùng hiển thị cho một đối tượng, tính bằng pixel. Giá trị chứa chiều rộng với phần đệm, thanh cuộn và đường viền, nhưng không bao gồm lề
Thuộc tính clientWidth tương tự như thuộc tính offsetWidth, nhưng nó trả về chiều rộng chỉ bao gồm phần đệm
- Nếu bạn cần tổng chiều rộng của nội dung của một phần tử, hãy sử dụng thuộc tính scrollWidth. Nó trả về chiều rộng của nội dung với phần đệm, nhưng không có thanh cuộn, đường viền và lề. Trong Opera, thanh cuộn cũng được bao gồm
- Một cách khác để lấy chiều rộng của một đối tượng là sử dụng phương thức getBoundingClientRect. Nó trả về hình chữ nhật giới hạn của đối tượng mà không có lề
Lưu ý rằng thuộc tính offsetWidth đặc biệt dành cho phần tử html. Nó trả về chiều rộng của vùng máy khách của trình duyệt mà không có thanh cuộn dọc như thuộc tính clientWidth của phần tử html. Vì thuộc tính offsetHeight của phần tử html hoạt động khác nhau trong trình duyệt, nên hãy sử dụng thuộc tính clientWidth và clientHeight của phần tử html nếu bạn cần kích thước của vùng máy khách của trình duyệt
Nếu bạn cần tổng kích thước của tài liệu, hãy sử dụng thuộc tính scrollWidth và scrollHeight của phần tử html
Lưu ý rằng thuộc tính offsetWidth của phần tử html truy xuất chiều rộng theo kích thước pixel vật lý trong Internet Explorer trước phiên bản 8, trong khi từ phiên bản 8, thuộc tính này trả về chiều rộng theo kích thước pixel logic.Để biết thêm chi tiết, vui lòng xem trang dành cho thuộc tính clientWidth.
- Để lấy chiều cao của tài liệu hoặc một thành phần trong tài liệu, hãy sử dụng thuộc tính clientHeight, offsetHeight hoặc scrollHeight
- Nếu bạn cần vị trí của một phần tử, bạn có thể sử dụng các thuộc tính offsetLeft, offsetTop và phương thức getBoundingClientRect
cú pháp
mục tiêu. offsetChiều rộng;
Bạn có thể tìm thấy các đối tượng liên quan trong phần Đối tượng được hỗ trợ bên dưới
Thuộc tính này là chỉ đọc
Những giá trị khả thi
Số nguyên trả về chiều rộng, tính bằng pixel
Vỡ nợ. thuộc tính này không có giá trị mặc định
Ví dụ mã HTML 1
Ví dụ này minh họa việc sử dụng thuộc tính offsetWidth
#container { width: 350px; height: 150px; margin: 10px; border: 2px solid red; padding: 15px; } function GetContainerSize [] { var container = document.getElementById ["container"]; var message = "The height with padding: " + container.clientHeight + "px.\n"; message += "The height with padding and border: " + container.offsetHeight + "px.\n"; message += "The width width padding: " + container.clientWidth + "px.\n"; message += "The width with padding and border: " + container.offsetWidth + "px.\n"; alert [message]; } The width of this element is 350px The height of this element is 150px Furthermore, the element has the following style definitions: margin: 10px; border: 2px solid red; padding: 15px; Get the size of the container!Sao chép CodePrintPreviewSyntax Highlighter
Bạn có thấy ví dụ này hữu ích không? yes no
Được hỗ trợ bởi các đối tượng
phần tử HTML
a, abbr, từ viết tắt, địa chỉ, applet, khu vực, b, bdo, lớn, nháy mắt, blockquote, cơ thể, br, nút, chú thích, trung tâm, trích dẫn, mã, col, colgroup, dd, del, dfn, dir, div, . nút, đầu vào. hộp kiểm, đầu vào. tập tin, đầu vào. hình ảnh, đầu vào. mật khẩu, đầu vào. đài phát thanh, đầu vào. phạm vi, đầu vào. đặt lại, đầu vào. tìm kiếm, nhập liệu. đệ trình, đầu vào. văn bản, ins, isindex, kbd, keygen, nhãn, huyền thoại, li, danh sách, bản đồ, vùng chọn, menu, nobr, noframes, noscript, đối tượng, ol, optgroup, tùy chọn, p, văn bản gốc, trước, q, rt, ruby,