ScrollHeight: Gets the scroll height of the object.
ScrollLeft: Sets or gets the distance between the left edge of the object and the leftmost of the currently visible content in the window
ScrollTop: Sets or gets the distance between the top of the object and the top of the visible content in the window
ScrollWidth: Gets the scrolling width of the object
Offsetheight: Gets the height of the object relative to the layout or parent coordinates specified by the parent coordinate OffsetParent property
Offsetleft: Gets the calculated left position of the object relative to the layout or the parent coordinate specified by the OffsetParent property
OffsetTop: Gets the computed top position of the object relative to the layout or the parent coordinate specified by the OffsetTop property
Offsetwidth: Is the visible width of the object, such as the edge of the package scroll bar, which changes with the window's display size
Event.clientx horizontal coordinates of relative documents
Event.clienty vertical coordinates of relative documents
ClientWidth: Is the width of the object visible, not the edge of the scroll bar, etc., and will change with the window's display size.
ClientHeight: is considered to be the height of the content viewable area, that is, the page browser can see the content of this area of the height, is generally the last toolbar below the status bar above the area, regardless of the content of the page.
Event.offsetx horizontal coordinates relative to the container
Event.offsety the vertical coordinate of the relative container
Document.documentElement.scrollTop The vertical scrolling value
Event.clientx+document.documentelement.scrolltop horizontal coordinates of relative documents + amount of vertical scrolling
The above mainly refers to IE, Firefox differences are 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
(Need to mention: the Margin property in CSS, and clientwidth, Offsetwidth, clientheight, offsetheight are irrelevant)
Test:
<title></title>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<style type= "Text/css" >
</style>
<body>
<script language= "JavaScript" >
var s = "";
s + = "\ r \ n page Visible area width:" + document.body.clientWidth;
s + = "\ r \ n page visible Area High:" + document.body.clientHeight;
s + = "\ r \ n page Visible area width:" + document.body.offsetWidth + "(including edge width)";
s + = "\ r \ n page visible Area High:" + Document.body.offsetHeight + "(including edge width)";
s + = "\ r \ n Full text width:" + document.body.scrollWidth;
s + = "\ r \ n Full text High:" + document.body.scrollHeight;
s + = "\ r \ n page is rolled High:" + document.body.scrollTop;
s + = "\ r \ n page is rolled away left:" + document.body.scrollLeft;
s + = "\ r \ n Web page body part:" + window.screentop;
s + = "\ r \ n Page body part left:" + window.screenleft;
s + = "\ r \ n Screen resolution High:" + window.screen.height;
s + = "\ r \ n Screen resolution width:" + window.screen.width;
s + = "\ r \ n screen available work area height:" + window.screen.availHeight;
s + = "\ r \ n screen available work area width:" + window.screen.availWidth;
alert (s);
</SCRIPT>
</body>
The above is from http://www.it596.com/(technical discussion and sharing corner of the programmer)
From: http://hi.baidu.com/niegerdai/blog/item/f47227517d95c8858c5430ba.html
Take some time to figure out top, ClientTop, ScrollTop, OffsetTop
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
