Offsetwidth trong javascript là gì?

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ề
Bạn có thể đặt chiều rộng của một phần tử với các thuộc tính kiểu width, pixelWidth và posWidth. Trong trường hợp đó, giá trị của chiều rộng chứa chiều rộng của nội dung hiển thị với thanh cuộn dọc, nhưng không có phần đệm, đường viền và lề. Bạn có thể lấy giá trị của thuộc tính kiểu chiều rộng theo các đơn vị khác nhau với các thuộc tính này, không phải chiều rộng được hiển thị của phần tử

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

<head>
    <style>
        #container {
            width: 350px;
            height: 150px;
            margin: 10px;
            border: 2px solid red;
            padding: 15px;
        }
    style>
    <script type="text/javascript">
        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);
        }
    script>
head>
<body>
    <div id="container">
        The width of this element is 350px<br />
        The height of this element is 150px<br />
        Furthermore, the element has the following style definitions:<br />
        margin: 10px; border: 2px solid red; padding: 15px;
    div>
    <button onclick="GetContainerSize ();">Get the size of the container!button>
body>

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,

Sự khác biệt giữa clientWidth và offsetWidth là gì?

clientWidth là chiều rộng bên trong (tức là. không gian bên trong một phần tử bao gồm phần đệm nhưng không bao gồm đường viền và thanh cuộn) offsetWidth là chiều rộng bên ngoài (nghĩa là. không gian bị chiếm bởi phần tử, bao gồm phần đệm và đường viền)

Làm cách nào để lấy chiều rộng của một phần tử JavaScript?

Để đo chiều rộng của phần tử div, chúng ta sẽ sử dụng thuộc tính offsetWidth của JavaScript . Thuộc tính này của JavaScript trả về một số nguyên biểu thị chiều rộng bố cục của một phần tử và được đo bằng pixel. Giá trị trả về. Trả về chiều rộng pixel bố cục của phần tử tương ứng.

clientWidth trong JavaScript là gì?

offsetHeight trong JavaScript là gì?

thuộc tính chỉ đọc offsetHeight trả về chiều cao của phần tử, bao gồm phần đệm dọc và đường viền, dưới dạng số nguyên . Thông thường, offsetHeight là phép đo chiều cao CSS của phần tử bằng pixel, bao gồm mọi đường viền, phần đệm và thanh cuộn ngang (nếu được hiển thị).