These attributes are often used for scrolling. They are generally as follows:
First, define a div. The style is as follows:
<Style>
* {Margin: 0px; padding: 0px ;}
Body {margin: 0px; padding: 10px; Border: solid 10px # 69f ;}
. AA {margin: 20px auto 0px; width: 100px; Height: 50px; overflow: auto; Border: solid 1px # cccccc; padding: 0px 10px ;}
</Style>
<SCRIPT type = "text/JavaScript">
Window. onload = test;
Function Test (){
VaR AA = Document. getelementbyid ("AA ");
// AA. scrolltop = 60;
// Alert (AA. scrolltop); // If the scroll bar does not scroll, it is set to 0. For example, if the scroll bar is 20, 20 is displayed.
// Alert (document. Body. scrollheight); // The height of the webpage displayed on the screen, that is, 666 of the height of a screen
// Alert (document. Body. clienttop); // 10 indicates the top Border width of the body.
// Alert (AA. style. Top); // nothing will pop up ???
// Alert (AA. scrolltop); // 60 if the value of AA. scrolltop is not set to 60, that is, when the scroll bar is not scrolled, 0 is displayed.
// Alert (AA. offsettop); // 40 Div offset the distance from the top window
// Alert (AA. clienttop); // 1 indicates the upper border of the DIV
// Alert (AA. scrollheight); // the total height of the 380 Div content. That is, the height is not set, so that the content can be adaptive to the height + padding.
// Alert (AA. offsetheight); // Add Up and down padding to the height of the 72 Div, and add border, that is, height + paading + border.
// Alert (AA. clientheight); // Add Up and down padding to the height of the 70 Div, that is, height + padding.
// Alert (document. Body. clientheight) // The height of content displayed on the 112 Screen
// Alert (AA. clientwidth); // The width of the 103 Div minus the width of the scroll bar and the Left and Right padding
// Alert (AA. scrollwidth); // The width of the 103 Div minus the width of the scroll bar plus the Left and Right padding, which is the same as that of AA. clientwidth.
// Alert (AA. offsetwidth); // Add padding + border to the width of the 122 Div, that is, width + padding + border.
// Alert (document. Body. clientwidth); // 1346 the width of the entire screen minus the Left and Right Border of the body, that is, 1366-20
// Alert (document. Body. offsetwidth); // 1366 the width of the entire Screen
Alert (AA. clientleft); // 1 is the left border of the DIV
Alert (AA. scrollleft); // 0 the scroll bar does not scroll to the right, so 0 is displayed.
Alert (AA. offsetleft); // IE and Google are 622, Firefox is 612, that is, ie and Google contain the left border of the body, while Firefox does not include the left border of the body. In short
The distance between the DIV and the left side of the window.
Alert (document. Body. clientleft); // 10 indicates the left border of the body.
}
</SCRIPT>
Div. scrolltop: if the above AA. scrolltop is not set to 60, that is, when the scroll bar is not scrolled, 0 is displayed.
Div. offsettop: the distance from the top window of the DIV offset
Div. clienttop: upper border of Div
Div. scrollheight: the total height of the DIV content, that is, the height of the content is not set, so that the content is adaptive to get the height + padding
Div. offsetheight: add the height of the entire Div with the upper and lower borders and the border. That is, the height of the entire Div. That is, height + padding + border
Div. clientheight: the height of the DIV specified in the CSS style file plus the upper and lower padding, without the height of the lower border. That is, height + padding
Document. Body. clientheight: the height of the content displayed on the screen does not contain the upper and lower borders of the body.
Div. clientwidth: The DIV width minus the scroll bar width plus the Left and Right padding
Div. scrollwidth: The same as Div. clientwidth.
Div. offsetwidth: Add padding + border to the DIV width, that is, width + padding + border.
Document. Body. clientwidth: the width of the entire screen, that is, the display resolution width of the screen width minus the left and right borders of the body
Document. Body. offsetwidth: the width of the entire screen, that is, the width of the display resolution of the screen width. 1366
Div. clientleft: The left border of the DIV
Div. scrollleft: the distance from the scroll bar to the right
Div. offsetleft: The Left Border between the DIV and the window. IE and Google contain the left border of the body. Firefox does not include the left border of the body. That is, the Left Border of the body is reduced by IE and Google in Firefox.
Document. Body. clientleft: Left Border of the body
Differences and usage of scrolltop clienttop offsettop scrollheight clientheight clientwidth
