A brief analysis of the differences between offsetLeft, Left and clientLeft_Basic knowledge

Assume obj is an HTML control

obj.offsetTop refers to the calculated upper position of obj relative to the layout or the parent coordinate specified by the offsetParent attribute, integer, unit pixel.

obj.offsetLeft refers to the calculated left position of obj relative to the layout or the parent coordinate specified by the offsetParent attribute, integer, unit pixel.

obj.offsetWidth refers to the absolute width of the obj control itself, excluding the part not displayed due to overflow, that is, its actual width, integer, unit pixel.

obj.offsetHeight refers to the absolute height of the obj control itself, excluding the part that is not displayed due to overflow, that is, the height it actually occupies, integer, unit pixel.

Let’s explain the offsetParent mentioned earlier.

offsetParent Gets a reference to the container object that defines the offsetTop and offsetLeft properties of the object. offsetTop and offsetParent are very complicated, different browsers have different interpretations, and the interpretation is different again, so we generally only need to understand that the absolute position of the control in the browser can be obtained through the two.

The above properties are also valid in FireFox.

In addition: what we are talking about here refers to the attribute value of the HTML control, not document.body. The value of document.body has different interpretations in different browsers (in fact, most environments are due to the It is caused by different interpretations of .body, not by different interpretations of offset)

We know that offsetTop can get the position of the HTML element from the top or outer element, and style.top can also be used. The difference between the two is:

1. offsetTop returns a number, while style.top returns a string. In addition to the number, it also has the unit: px.

2. offsetTop is read-only, while style.top is read-writeable.

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

The same is true for offsetLeft and style.left, offsetWidth and style.width, offsetHeight and style.height.

clientHeight
No one has any objection to clientHeight. They all think it is the height of the visible area of ​​the content, which means the height of the area where the content can be seen in the page browser. , generally the area below the last toolbar to above the status bar, has nothing to do with the page content.

offsetHeight
IE and Opera believe that offsetHeight = clientHeight scroll bar border.
NS and FF consider offsetHeight to be the actual height of the web page content, which can be smaller than clientHeight.

scrollHeight
IE and Opera consider scrollHeight to be the actual height of the web page content, which can be smaller than clientHeight.
NS and FF consider scrollHeight to be the height of web page 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 believe that offsetHeight and scrollHeight are both web page content heights, but when the web page content height is less than or equal to clientHeight, the value of scrollHeight is clientHeight, and offsetHeight can be less than clientHeight.
IE and Opera believe that offsetHeight is the visible area clientHeight scroll bar plus border. scrollHeight is the actual height of the web page content.

Similarly
The explanations of clientWidth, offsetWidth and scrollWidth are the same as above, just replace the height with the width.

Explanation
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, these three values ​​are the same value, and they all represent the actual content. high. Most new versions of browsers support enabling different interpreters based on the DOCTYPE specified on the page

scrollTop is the "scrolled" height value, example:

Copy code The code is as follows:

If scrollTop is set for p, these contents may not be fully displayed.

Since scrollTop is set for the outer element p, the inner element will roll up, and the rolled up part is scrollTop.

scrollLeft is similar.

We already know that offsetHeight is the width of its own element, and scrollHeight is the absolute width of the internal element, including the hidden part of the internal element. In the above, the scrollHeight of p is 300, and the offsetHeight of p is 100.

scrollWidth is similar.

IE and FireFox fully support, while Netscape 8 and Opera 7.6 do not support scrollTop, scrollLeft (except document.body.scrollTop, document.body.scrollLeft).

1.clientHeight, clientWidth:
These two properties roughly display the pixel height and width of the element's content. In theory, these measurements do not take into account any
added through the style sheet Margins, borders, etc. in elements.

2.clientLeft, clientTop:
These two return the thickness of the border around the element. If you do not specify a border or do not position the element, its value is 0.

3.scrollLeft,scrollTop:
If the element is scrollable, you can use these two properties to get how far the element has scrolled in the horizontal and vertical directions, the unit is pixels.
For non-scrollable elements, these values ​​are always 0.

4.scrollHeight,scrollWidth:
No matter how many objects are visible on the page, they get the whole.

5.style.left:
The offset of the positioned element from the left edge of the containing rectangle

6.style.pixelLeft:
Returns the integer pixel value of the left border offset of the positioned element. Because the non-pixel value of the attribute returns a string containing the unit, for example, 30px. Use this attribute to process values ​​in pixels individually.

7.style:posLetf:
Returns the numerical value of the left border offset of the positioned element, regardless of the unit specified by the corresponding style sheet element. Because the non-position value of the attribute returns a value containing Unit string, for example, 1.2em

top, pixelTop, posTop are just some analogies.

LEFT: It is the position moved from left to right, that is, the distance between the widget and the left edge of the screen;

clientLeft Returns the distance between the offsetLeft attribute value of the object and the real value to the left side of the current window

offsetLeft Returns the left value of the object relative to the layout or coordinates of the parent object. It takes the upper left corner of the parent object as the origin of the coordinates, and the x coordinates in the positive direction of the X and Y axes to the right and downwards

pixelLeft Sets or returns the position of the object relative to the left side of the window

scrollWidth is the width of the actual content of the object, excluding the edge width, and will change with the amount of content in the object (too much content may change the object's width) actual width).

clientWidth is the visible width of the object, excluding scroll bars and other edges, and will change with the display size of the window.

offsetWidth is the visible width of the object, including scroll bars and other edges, and will change with the display size of the window.

IE6.0, FF1.06:
clientWidth = width padding
clientHeight = height padding
offsetWidth = width padding border
offsetHeight = height padding border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(Need to mention: the margin attribute in CSS is different from clientWidth , offsetWidth, clientHeight, offsetHeight are irrelevant)

offsetwidth: is the offset width of the element relative to the parent element. Equal to border padding width
clientwidth: is the visible width of the element. Equal to padding width
scrollwidth: is the width of the element and includes the scrolling part.
offsetLeft: The position of the Html element relative to its own offsetParent element
scrollLeft: Return and set the coordinate value of the current horizontal scrolling task

Copy code The code is as follows:

onclick="alert('offsetLeft:' this. offsetLeft)">

Save it as a web page, run it, click the button, the scroll bar moves
Click the div, and the b relative will pop up first At the position of a, the position of a relative to the window pops up

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn