HTML precise positioning: scrollLeft, scrollWidth, clientWidth, offsetWidth
scrollHeight: Get the scroll height of the object.
scrollLeft: Set or get the distance between the left edge of the object and the leftmost of the currently visible content in the window
scrollTop: Set or get the distance between the top of the object and the top of the visible content in the window
scrollWidth: Get the scroll width of the object
offsetHeight: Get the height of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent property
offsetLeft: Get the calculated left position of the object relative to the layout or the parent coordinate specified by the offsetParent property
offsetTop: Get the object relative to the layout or by the offsetTop property The calculated top position of the specified parent coordinate
event.clientX The horizontal coordinate
relative to the document event.clientY The vertical coordinate relative to the document
event.offsetX The horizontal coordinate
relative to the container event.offsetY The vertical coordinate relative to the container
document.documentElement.scrollTop The vertical scrolling The value of
event.clientX+document.documentElement.scrollTop is relative to the horizontal coordinates of the document + the amount of scrolling in the vertical direction
Here are the common properties for building migration code in JavaScript
. The width of the visible area of the page: document.body.clientWidth;
the height of the visible area of the page: document.body.clientHeight;
the width of the visible area of the page: document.body.offsetWidth (including the width of the border);
The height of the visible area of the web page: document.body.offsetHeight (including the width of the border); the
full text width of the
web page body: document.body.scrollWidth; the full text height of the web page body: document.body.scrollHeight;
the height of the web page being scrolled: document.body. scrollTop;
the left page of the page being scrolled: document.body.scrollLeft;
on the page body item group: window.screenTop; the
left page of the page body item group: window.screenLeft;
high screen resolution: window.screen.height;
screen resolution width: window.screen.width;
screen available workspace height: window.screen.availHeight;
1、offsetLeft
Suppose obj is an HTML control.
obj.offsetTop refers to the position of the upper or upper control in the obj interval, integer, unit pixel.
obj.offsetLeft refers to the position of the left or upper control of the obj interval, integer, unit pixel.
obj.offsetWidth refers to the width of the obj control itself, integer, unit pixel.
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
我们对前面提到的“上方或上层”与“左方或上层”控件作个申明。
例如：
<div id="tool">
<input type="button" value="提交">
<input type="button" value="重置">
</div>
“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的间隔，因为距其上边比来的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的间隔，因为距其上边比来的是 “tool” 层的上边框。
“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的间隔，因为距其左边比来的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的间隔，因为距其左边比来的是“提交”按钮的右边框。
以上属性在 FireFox 中也有效。
另 外：我们这里所说的是指 HTML 控件的属性值，并不是 document.body，document.body 的值在不合浏览器中有不合申明（实际上大多半景象是因为对 document.body 申明不合造成的，并不是因为对 offset 申明不合造成的），点击这里查看不合点。
题目：offsetTop 与 style.top 的差别
筹办常识：offsetTop、offsetLeft、offsetWidth、offsetHeight
我们知道 offsetTop 可以获得 HTML 元素间隔上方或外层元素的地位，style.top 也是可以的，二者的差别是：
一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而 style.top 可读写。
三、若是没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样事理。
题目：clientHeight、offsetHeight和scrollHeight
我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的申明，这里说的是 document.body，若是是 HTML 控件，则又有不合，点击这里查看。
这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
2、clientHeight
clientHeight
大师对 clientHeight 都没有什么贰言，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个对象条以下到状况栏以上的这个区域，与页面内容无关。
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 迁移转变条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。
简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于便是 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 迁移转变条加边框。scrollHeight 则是网页内容实际高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的申明与上方雷同，只是把高度换成宽度即可。
然则
FF 在不合的 DOCTYPE 中对 clientHeight 的申明不合， xhtml 1 trasitional 中则不是如上申明的。其它浏览器则不存在此题目。
题目：scrollTop、scrollLeft、scrollWidth、scrollHeight
3、scrollLeft
scrollTop 是“卷”起来的高度值，示例：
<div style="width:100px;height:100px;background-color:＃FF0000;overflow:hidden;" id="p">
<div style="width:50px;height:300px;background-color:＃0000FF;" id="t">若是为 p 设置了 scrollTop，这些内容可能不会完全显示。</div>
</div>
<script type="text/javascript">
var p = document.getElementById（"p"）;
p.scrollTop = 10;
</script>
因为为外层元素 p 设置了 scrollTop，所以内层元素会向上卷。
scrollLeft 也是类似事理。
我们已经知道 offsetHeight 是自身元素的宽度。
而 scrollHeight 是内部元素的绝对宽度，包含内部元素的隐蔽的项目组。
上述中 p 的 scrollHeight 为 300，而 p 的 offsetHeight 为 100。
scrollWidth 也是类似事理。
IE 和 FireFox 周全支撑，而 Netscape 和 Opera 不支撑 scrollTop、scrollLeft（document.body 除外）。
揭晓时候：2007-10-15 20:20:16
题目：offsetTop、offsetLeft、offsetWidth、offsetHeight
4、clientLeft
返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的间隔，可以懂得为边框的长度
一向以来对offsetLeft，offsetTop，scrollLeft，scrollTop这几个办法很含混，花了一天的时候好好的进修了一下．得出了以下的成果：
1.offsetTop :
当前对象到其上级层顶部的间隔.
不克不及对其进行赋值.设置对象到页面顶部的间隔请用style.top属性.
2.offsetLeft :
当前对象到其上级层左边的间隔.
不克不及对其进行赋值.设置对象到页面左部的间隔请用style.left属性.
3.offsetWidth :
当前对象的宽度.
与style.width属性的差别在于:如对象的宽度设定值为百分比宽度，则无论页面变大还是变小，style.width都返回此百分比，而offsetWidth则返回在不合页面中对象的宽度值而不是百分比值
4.offsetHeight :
与style.height属性的差别在于:如对象的宽度设定值为百分比高度，则无论页面变大还是变小，style.height都返回此百分比，而offsetHeight则返回在不合页面中对象的高度值而不是百分比值
5.offsetParent :
当前对象的上级层对象.
重视.若是对象是包含在一个DIV中时，此DIV不会被当做是此对象的上级层，（即对象的上级层会跳过DIV对象）上级层是Table时则不会有题目.
哄骗这个属性，可以获得当前对象在不合大小的页面中的绝对地位．
获得绝对地位脚本代码
1function GetPosition（obj）
2{
3 var left = 0;
4 var top = 0;
5
6 while（obj != document.body）
7 {
8 left = obj.offsetLeft;
9 top = obj.offsetTop;
10
11 obj = obj.offsetParent;
12 }
13
14 alert（"Left Is : " + left + "\r\n" + "Top Is : " + top）;
15}
6.scrollLeft :
对象的最左边到对象在当前窗口显示的局限内的左边的间隔．
便是在呈现了横向迁移转变条的景象下，迁移转变条拉动的间隔．
7.scrollTop
对象的最顶部到对象在当前窗口显示的局限内的顶边的间隔．
便是在呈现了纵向迁移转变条的景象下，迁移转变条拉动的间隔．
我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的申明，这里说的是 document.body，若是是 HTML 控件，则又有不合，点击这里查看。
这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
clientHeight
The master has nothing to say about clientHeight. They all think it is the height of the visible area of the content, that is to say, the height of the area where the content can be seen in the page browser, generally the area below the last object bar to above the status bar , regardless of page content.
offsetHeight
IE and Opera think that offsetHeight = clientHeight + transition bar + border.
NS and FF think that offsetHeight is the actual height of web page content, which can be smaller than clientHeight.
scrollHeight
IE and Opera think that scrollHeight is the actual height of web page content, which can be smaller than clientHeight.
NS and FF think that scrollHeight is the height of web page content, but the minimum value is clientHeight.
general speaking
clientHeight is the height of this area of the content viewed through the browser.
NS and FF think that both offsetHeight and scrollHeight are the height of web page content, but when the height of web page content is less than clientHeight, the value of scrollHeight is clientHeight, and offsetHeight can be less than clientHeight.
IE and Opera think that offsetHeight is the transition bar and border of the visible area clientHeight. scrollHeight is the actual height of the page content.
Similarly
The declarations of clientWidth, offsetWidth and scrollWidth are the same as above, just replace the height with the width.