javascript的offset、client、scroll、screen使用方法

1.offset

offsetTop 指元素距离上方或上层控件的位置，整型，单位像素。
offsetLeft 指元素距离左方或上层控件的位置，整型，单位像素。
offsetWidth 指元素控件自身的宽度，整型，单位像素。
offsetHeight 指元素控件自身的高度，整型，单位像素。

网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)

IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

“上方或上层”与“左方或上层”控件作个说明：

<p id="tool">

<input type="button" value="提交">

<input type="button" value="重置">

</p>

“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离，因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离，因为距其左边最近的是“提交”按钮的右边框。

offsetParent （当前对象的上级层对象. ）:
注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.
利用这个属性，可以得到当前对象在不同大小的页面中的绝对位置．
得到绝对位置脚本代码

function GetPosition(obj) {

　　var left = 0;

　　var top = 0;

　　while(obj != document.body) {

　　　　left = obj.offsetLeft;

　　　　top = obj.offsetTop;

　　　　obj = obj.offsetParent;

　　}

　　alert("Left Is : " + left + "\r\n" + "Top Is : " + top);

}

2.client

内容可视区域宽：document.body.clientWidth
内容可视区域高：document.body.clientHeight

四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

client事件发生时鼠标指针的坐标例：

<html>

<head>

<script type="text/javascript">

function show_coords(event)

  {

  x=event.clientX

  y=event.clientY

  alert("X coords: " + x + ", Y coords: " + y)

  }

</script>

</head>

<body onmousedown="show_coords(event)">

    <p>Click in the document. An alert box will alert

the x and y coordinates of the mouse pointer.</p>

</body>

</html>

3.scroll

网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft

IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

scrollTop 是“卷”起来的高度值，示例：

<p class="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">

<p class="width:50px;height:300px;background-color:#0000FF;" id="t">如果为 p 设置了 scrollTop，这些内容可能不会完全显示。</p>

</p>

<script type="text/javascript">

var p = document.getElementById("p");

p.scrollTop = 10;

</script>

由于为外层元素 p 设置了 scrollTop，所以内层元素会向上卷。
scrollLeft 也是类似道理。

4.screen

网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth