Differences between offsetLeft, Left, and clientLeft

This article mainly analyzes the differences between offsetLeft, Left, and clientLeft in detail. If you need a friend, you can refer to it for help.

Assume that obj is an HTML control.

Obj. offsetTop refers to the upper-side position of obj relative to the layout or the parent coordinate specified by the offsetParent attribute. It is an integer in pixels.

Obj. offsetLeft refers to the left-side position of obj relative to the layout or the parent coordinate specified by the offsetParent attribute. It is an integer in pixels.

Obj. offsetWidth refers to the absolute width of the obj control. It does not include the undisplayed part due to overflow, that is, the actual width, integer, and unit pixel.

Obj. offsetHeight refers to the absolute height of the obj control, excluding the undisplayed parts due to overflow, that is, the actual height occupied by the obj control, which is an integer in pixels.

We will describe the offsetParent mentioned above.

OffsetParent gets the reference of the container Object Defining the offsetTop and offsetLeft attributes of the object. OffsetTop and offsetParent are very complicated. Different browsers have different interpretations, and the floating interpretation is different. Therefore, we generally only need to understand the two to obtain the absolute position of the control in the browser.

The preceding attributes are also valid in FireFox.

In addition, what we refer to here refers to the attribute value of the HTML control, not document. body, document. body values have different interpretations in different browsers (in fact, most environments are due to document. different body interpretations are not caused by different interpretations of offset)

We know that offsetTop can obtain the position of the HTML element above or outside the element, and style. top is also acceptable. The difference between the two is:

1. offsetTop returns numbers, while style. top returns strings. In addition to numbers, it also has the unit: px.

Ii. offsetTop read-only, while style. top can be read and written.

3. If the top style is not specified for the HTML element, style. top returns an empty string.

OffsetLeft, style. left, offsetWidth, style. width, offsetHeight, and style. height are the same principles.

ClientHeight
Everyone has no objection to clientHeight and thinks it is the height of the visible area of the content, that is, the height of the area where the content can be viewed in the browser of the page, generally, the area below the last toolbar to above the status bar is irrelevant to the page content.

OffsetHeight
IE and Opera think offsetHeight = clientHeight + scroll bar + border.
NS and FF hold that offsetHeight is the actual height of the webpage content, which can be smaller than clientHeight.

ScrollHeight
IE and Opera hold that scrollHeight is the actual height of the webpage content, which can be smaller than clientHeight.
NS and FF think that scrollHeight is the height of the webpage content, but the minimum value is clientHeight.

Simply put
ClientHeight is the height of the area where the content is viewed through the browser.
NS and FF hold that both offsetHeight and scrollHeight are the content height of the webpage. However, when the content height of the webpage is less than or equal to clientHeight, the value of scrollHeight is clientHeight, while the value of offsetHeight can be less than clientHeight.
IE and Opera hold that offsetHeight is the clientHeight scroll bar and border in the visible area. ScrollHeight indicates the actual height of the webpage content.

Likewise
The description of clientWidth, offsetWidth, and scrollWidth is the same as above. You only need to change the height to the width.

Description
The above is based on dtd html 4.01 Transitional. If it is dtd xhtml 1.0 Transitional, the meaning will be different. In XHTML, all three values are the same value, indicating the actual height of the content. Most new browsers support different interpreters based on the DOCTYPE specified on the page.

ScrollTop is the height of a volume. For example:

The Code is as follows:

If scrollTop is set for p, the content may not be fully displayed.