乐闻世界logo
搜索文章和话题

What is the different between offsetwidth clientwidth scrollwidth and height respectively

JavaScript

3个答案

1
2
3

offsetWidth

  • Definition: offsetWidth represents the total width of the element, including its visible content width, border, and padding, but excluding margin.
  • Usage Scenario: Use it when you need the total width of the element, including its border and padding.
  • Example: For example, if an element has a width of 100px, with 10px padding on both sides and 1px border on both sides, then offsetWidth would be 100 + 10 + 10 + 1 + 1 = 122px.

clientWidth

  • Definition: clientWidth represents the internal visible width of the element, including padding, but excluding border, vertical scrollbar (if present), and margin.
  • Usage Scenario: Use it when you want to obtain the width of the content area plus padding, but excluding border or scrollbar.
  • Example: For the same element above, clientWidth would be 100 + 10 + 10 = 120px (assuming no vertical scrollbar).

scrollWidth

  • Definition: scrollWidth represents the total width of the element's content, including parts hidden due to overflow. It includes padding but excludes border, vertical scrollbar (if present), and margin.
  • Usage Scenario: Use it when you need the total width of the element's content, including both visible and hidden (overflow) parts.
  • Example: If the element has sufficient content to trigger a horizontal scrollbar and the actual content width is 300px, then scrollWidth would be 300 + 10 + 10 = 320px.

height

  • Definition: height is not a standard DOM property; it typically refers to the height set via CSS (excluding padding, border, or margin).
  • Usage Scenario: Use it when defining or retrieving the height of the content area.
  • Example: If you set height: 200px; via CSS, the content area height is 200px, regardless of other factors.

Summary: offsetWidth and clientWidth both measure the actual space the element occupies in the page layout, while scrollWidth measures the actual width of the element's content, regardless of visibility. On the other hand, height is typically a CSS-set property specifying the content area height. These properties measure different aspects of the element's width and height.

2024年6月29日 12:07 回复

There is a great article on MDN that explains the underlying theory of these concepts: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements.

It also explains the important conceptual difference between the width/height of boundingClientRect and offsetWidth/offsetHeight.

To verify whether this theory is correct, you need some tests. This is what I did here: https://github.com/lingtalfi/dimensions-cheatsheet.

It tests Chrome 53, Firefox 49, Safari 9, Edge 13, and Internet Explorer 11.

The test results confirm that the theory is generally correct. For the tests, I created 3 divs, each containing 10 lorem ipsum paragraphs. Some CSS is applied to them:

css
.div1{
    width: 500px;
    height: 300px;
    padding: 10px;
    border: 5px solid black;
    overflow: auto;
}
.div2{
    width: 500px;
    height: 300px;
    padding: 10px;
    border: 5px solid black;
    box-sizing: border-box;
    overflow: auto;
}

.div3{
    width: 500px;
    height: 300px;
    padding: 10px;
    border: 5px solid black;
    overflow: auto;
    transform: scale(0.5);
}

The results are as follows:

  • Section 1

    • offsetWidth: 530 (Chrome 53, Firefox 49, Safari 9, Edge 13, IE 11)
    • offsetHeight: 330 (Chrome 53, Firefox 49, Safari 9, Edge 13, IE 11)
    • boundingClientRect width: 530 (Chrome 53, Firefox 49, Safari 9, Edge 13, IE 11)
    • boundingClientRect height: 330 (Chrome 53, Firefox 49, Safari 9, Edge 13, IE 11)
    • clientWidth: 505 (Chrome 53, Firefox 49, Safari 9)
    • clientWidth: 508 (Edge 13)
    • clientWidth: 503 (IE 11)
    • clientHeight: 320 (Chrome 53, Firefox 49, Safari 9, Edge 13, IE 11)
    • scrollWidth: 505 (Chrome 53, Safari 9, Firefox 49)
    • scrollWidth: 508 (Edge 13)
    • scrollWidth: 503 (IE 11)
    • scrollHeight: 916 (Chrome 53, Safari 9)
    • scrollHeight: 954 (Firefox 49)
    • scrollHeight: 922 (Edge 13, IE 11)

  • Section 2

    • offsetWidth: 500 (Chrome 53, Firefox 49, Safari 9, Edge 13, IE 11)
    • offsetHeight: 300 (Chrome 53, Firefox 49, Safari 9, Edge 13, IE 11)
    • boundingClientRect width: 500 (Chrome 53, Firefox 49, Safari 9, Edge 13, IE 11)
    • boundingClientRect height: 300 (Chrome 53, Firefox 49, Safari 9)
    • boundingClientRect height: 299.9999694824219 (Edge 13, IE 11)
    • clientWidth: 475 (Chrome 53, Firefox 49, Safari 9)
    • clientWidth: 478 (Edge 13)
    • clientWidth: 473 (IE 11)
    • clientHeight: 290 (Chrome 53, Firefox 49, Safari 9, Edge 13, IE 11)
    • scrollWidth: 475 (Chrome 53, Safari 9, Firefox 49)
    • scrollWidth: 478 (Edge 13)
    • scrollWidth: 473 (IE 11)
    • scrollHeight: 916 (Chrome 53, Safari 9)
    • scrollHeight: 954 (Firefox 49)
    • scrollHeight: 922 (Edge 13, IE 11)

  • Section 3

    • offsetWidth: 530 (Chrome 53, Firefox 49, Safari 9, Edge 13, IE 11)
    • offsetHeight: 330 (Chrome 53, Firefox 49, Safari 9, Edge 13, IE 11)
    • boundingClientRect width: 265 (Chrome 53, Firefox 49, Safari 9, Edge 13, IE 11)
    • boundingClientRect height: 165 (Chrome 53, Firefox 49, Safari 9, Edge 13, IE 11)
    • clientWidth: 505 (Chrome 53, Firefox 49, Safari 9)
    • clientWidth: 508 (Edge 13)
    • clientWidth: 503 (IE 11)
    • clientHeight: 320 (Chrome 53, Firefox 49, Safari 9, Edge 13, IE 11)
    • scrollWidth: 505 (Chrome 53, Safari 9, Firefox 49)
    • scrollWidth: 508 (Edge 13)
    • scrollWidth: 503 (IE 11)
    • scrollHeight: 916 (Chrome 53, Safari 9)
    • scrollHeight: 954 (Firefox 49)
    • scrollHeight: 922 (Edge 13, IE 11)

Therefore, except for the boundingClientRect height value in Edge 13 and IE 11 (299.9999694824219 instead of the expected 300), the results confirm that the underlying theory is valid.

From there, here is my definition of these concepts:

  • offsetWidth/offsetHeight: The dimensions of the layout border box
  • boundingClientRect: The dimensions of the rendered border box
  • clientWidth/clientHeight: The dimensions of the visible part of the layout padding box (excluding scrollbars)
  • scrollWidth/scrollHeight: The dimensions of the layout content box (if not constrained by scrollbars)

Note: The default vertical scrollbar width is 12px in Edge 13, 15px in Chrome 53, Firefox 49, and Safari 9, and 17px in Internet Explorer 11 (measured via screenshots in Photoshop and confirmed by test results).

However, in some cases, your application may not use the default vertical scrollbar width.

Therefore, considering the definitions of these concepts, the vertical scrollbar width should equal (pseudo-code):

  • Layout size: offsetWidth - clientWidth - (borderLeftWidth + borderRightWidth)
  • Render size: boundingClientRect.width - clientWidth - (borderLeftWidth + borderRightWidth)

Note that if you are not familiar with layout and render, please read the MDN article.

Additionally, if you have other browsers (or if you want to view the test results yourself), you can see my test page here: http://codepen.io/lingtalfi/pen/BLdBdL

2024年6月29日 12:07 回复

The CSS box model is quite complex, especially when dealing with scrollable content. While browsers use CSS values to render the boxes, determining all dimensions with JavaScript alone is not straightforward if you only have CSS.

This is why each element has six DOM properties for your convenience: offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidth, and scrollHeight. These are read-only properties representing the current visual layout, and they are all integers (thus rounding errors may occur).

Let's explore them in detail:

  • offsetWidth, offsetHeight: The size of the visual box including all borders. It can be calculated by adding the width (or height) plus padding and borders, if the element has display: block.
  • clientWidth, clientHeight: The visible part of the box content, excluding borders or scrollbars but including padding. Cannot be directly calculated from CSS; it depends on the system's scrollbar size.
  • scrollWidth, scrollHeight: The size of all content within the box, including parts currently hidden outside the scrollable area. Cannot be directly calculated from CSS; it depends on the content.

CSS2 Box Model

Try it: jsFiddle

Since offsetWidth accounts for the scrollbar width, we can use it to calculate the scrollbar width via the formula:

shell
scrollbarWidth = offsetWidth - clientWidth - getComputedStyle().borderLeftWidth - getComputedStyle().borderRightWidth

Unfortunately, rounding errors may occur because offsetWidth and clientWidth are always integers, while the actual size may be a decimal when the zoom level is not 1.

Note that this formula:

shell
scrollbarWidth = getComputedStyle().width + getComputedStyle().paddingLeft + getComputedStyle().paddingRight - clientWidth

does not work reliably in Chrome because Chrome returns the width with the scrollbar already subtracted. (Additionally, Chrome renders paddingBottom to the bottom of the scrollable content, while other browsers do not.)

2024年6月29日 12:07 回复

你的答案