Added the clientleft description for the coordinate system of HTML elements.

1. offsettop, offsetleft, offsetwidth, and offsetheight

Assume that obj is an HTML control.

OBJ. offsettop refers to the position of the OBJ control above or upper layer. It is an integer in pixels.

OBJ. offsetleft refers to the position (from the outer boundary of OBJ to the inner boundary of the outer control) of OBJ from the left side or the upper control. It is an integer in pixels. (Note: The above is the explanation in IE. In ff, It is the distance from the outer boundary of OBJ to the left side of the browser. The same is true for offsettop)

OBJ. offsetwidth refers to the width, integer, and unit pixel of the OBJ control.

OBJ. offsetheight refers to the height, integer, and unit pixel of the OBJ control.

We will describe the "top or upper layer" and "Left or upper layer" controls mentioned above.

For example:
The "Submit" button's offsettop refers to the distance between the "Submit" button and the border on the "tool" layer, because the top border of the "tool" layer is closest to it.
The offsettop of the "reset" button refers to the distance between the "reset" button and the border on the "tool" layer, because the top border of the "tool" layer is closest to it.

The "Submit" button's offsetleft refers to the distance between the "Submit" button and the left border of the "tool" layer, because the left border closest to the left is the "tool" layer.
The "reset" button's offsetleft refers to the distance between the "reset" button and the right border of the "Submit" button, because the right border closest to the left is the "Submit" button.

Supplement: clientleft. FF does not support this attribute of elements. In ie, the standard interpretation is: retrieves the distance between the offsetleft property and the true left side of the client area. The key is to understand two points: offsetleft property and client area. First, let's talk about the client area. It should be the area (including padding) in the box model except the margin and border ). Offsetleft property refers to the distance from the outside of the element border to the inside of the parent element border. Therefore, clientleft is usually equal to the Border width on the left of the element.

Lab:

<Div style = "background-color: red; border-left: 15px solid blue; padding-left: 8px; margin-left: 12px; Height: 100px; width: 100px; "id =" test ">
<Div id = "inner" style = "border-left: 5px solid green; Background-color: yellow; Height: 30px; width: 30px; margin: 10px">
</Div>
</Div>

 

 

 

2.

Scrolltop is the height of a volume. For example:

<! -- Div style = "width: 100px; Height: 100px; Background-color: # ff0000; overflow: hidden; "id =" p "> <br/> <Div style =" width: 50px; Height: 300px; Background-color: # 0000ff; "id =" T "> If scrolltop is set for P, the content may not be fully displayed. </Div> <br/> <SCRIPT type = "text/JavaScript"> <br/> var P = document. getelementbyid ("p"); <br/> P. scrolltop = 10; <br/> </script -->
<SCRIPT type = "text/JavaScript">
VaR P = Document. getelementbyid ("p ");
P. scrolltop = 10;
</SCRIPT>

 

Because scrolltop is set for the outer element P, the inner element will roll.

Scrollleft is similar.

We already know that offsetheight is the width of its own element.

Scrollheight is the absolute width of the internal element, which contains the hidden part of the internal element.

In the preceding example, the scrollheight of P is 300, and the offsetheight of P is 100.

Scrollwidth is similar.

 

3.

Here we will talk about four types of browsers for document. the clientheight, offsetheight, and scrollheight of the body. Here we are talking about document. body. If it is an HTML control, it is different. Click here to view details.

These four browsers are IE (Internet Explorer), NS (Netscape), opera, and FF (Firefox ).

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.

However
FF has different interpretations of clientheight in different doctype, but not in XHTML 1 trasitional. This problem does not exist in other browsers.

supplement:
scrollheight: obtains the scroll height of an object.
scrollleft: sets or obtains the distance between the left-side boundary of the object and the leftmost side of the currently visible content in the window, it is the distance from the left inner boundary to the left content (which may have been rolled to the invisible content.
scrolltop: set or obtain the distance between the top of the object and the top of the visible content in the window
scrollwidth: obtain the scroll width of an object
offsetheight: obtain the height of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetparent attribute
offsetleft: obtain the left-side position of an object relative to the layout or the parent coordinate specified by the offsetparent attribute
offsettop: obtains the top position event of an object relative to the layout or the parent coordinate specified by the offsettop attribute. the horizontal coordinate event of clientx relative to the document. the vertical coordinate of clienty relative to the document
event. the horizontal coordinate event of offsetx relative to the container. offsety the vertical parameter document.doc umentelement of the relative container. event.clientx?document.doc umentelement. the horizontal coordinates of scrolltop documents and the amount of vertical scrolling

the difference between Firefox and IE is as follows:
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
(you need to mention: the margin attribute in CSS has nothing to do with clientwidth, offsetwidth, clientheight, and offsetheight.)