JS元素位置和位置坐标

常见的属性：

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth   （包含边线的宽）;

网页可见区域高： document.body.offsetHeight （包含边线的高）;

网页正文全文宽： document.body.scrollWidth;（含滚动条时，即滚动条从最顶端滚到最底端实际走过的距离）
网页正文全文高： document.body.scrollHeight;（含滚动条时，即滚动条从最顶端滚到最底端实际走过的距离）

网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文项目组上： window.screenTop;（返回窗口相对于屏幕的y坐标）
网页正文项目组左： window.screenLeft;（返回窗口相对于屏幕的x坐标）
屏幕辨别率的高： window.screen.height;（返回当前屏幕高度，即分辨率值）
屏幕辨别率的宽： window.screen.width;（返回当前屏幕宽度，即分辨率值）
屏幕可用工作区高度： window.screen.availHeight;（空白空间）

屏幕可用工作区的宽度：window.screen.availWidth;（空白空间）

（1）offsetLeft

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 间隔上方或上层控件的地位，整型，单位像素。

obj.offsetLeft 指 obj 间隔左方或上层控件的地位，整型，单位像素。

注意的是;

{I}、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

{II}、offsetTop 只读，而 style.top 可读写。

{III}、若是没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

（2）clientWidth/clientHeight,offsetWidth/offsetHeight,scrollWidth/scrollHeight

IE、Opera 认为 offsetHeight = clientHeight + 迁移转变条 + 边框。

NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。

NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

clientHeight 就是透过浏览器看内容的这个区域高度。

即：NS、 FF 认为 offsetWidth/offsetHeight 和 scrollWidth/scrollHeight 都是网页内容高度，只不过当网页内容高度小于便是 clientWidth/clientHeight 时，scrollWidth/scrollHeight 的值是 clientWidth/clientHeight，而 offsetWidth/offsetHeight 可以小于clientWidth/ clientHeight。IE、Opera 认为 offsetWidth/offsetHeight 是可视区域 clientWidth/clientHeight 迁移转变条加边框。scrollWidth/scrollHeight 则是网页内容实际高度。

（3）scrollTop/scrollLeft.scrollWidth/scrollHeight

IE 和 FireFox 周全支撑，而 Netscape 和 Opera 不支撑 scrollTop、scrollLeft（document.body 除外）。

scrollWidth/scrollHeight 是内部元素的绝对宽度/高度，包含内部元素的隐蔽的项目组。

（4）offsetWidth/offsetHeight

与style.width属性的差别在于:如对象的宽度设定值为百分比宽度，则无论页面变大还是变小，style.width都返回此百分比，而offsetWidth则返回在不合页面中对象的宽度值而不是百分比值

与style.height属性的差别在于:如对象的宽度设定值为百分比高度，则无论页面变大还是变小，style.height都返回此百分比，而offsetHeight则返回在不合页面中对象的高度值而不是百分比值

（5）offsetParent

offsetParent是个只读属性，返回最近显示指定位置的容器元素的引用。如果元素没有指定位置，最近的元素或者根元素（标准模式下是html，怪异模式下是body）就是offsetParent。当元素的style.display='none'时，offsetParent返回null。由于offsetTop和offsetLeft是相对于页边距，因此offsetParent是非常有用的。

浏览器兼容性

       在以WebKit为核心的浏览器上，如果元素是隐藏的（该元素或者上级元素style.display='none'）或者元素自身style.position='fixed'，那么就会返回null。

    在IE（9）上如元素style.position='fixed'，该属性就会返回null。（然而display:none不影响这个浏览器）

扩展：

1、style.left,style.top,style.right,style.bottom的使用注意：

｛I｝

position的属性中有static、fixed、relative、absolute四个属性。常用relative和absolute。

（1）若指定为static时，DIV遵循HTML规则；

（2）若指定为relative时，可以用top、left、right、bottom来设置DIV在页面中的偏移，但是此时不可使用层；

（3）若指定为absolute时，可以用top、left、right、bottom对DIV进行绝对定位；

（4）若指定为fixed时，在IE7与FF中DIV的位置相对于屏幕固定不变，IE6中没有效果(期待高手指点原因)； 
left:设置对象相对于文档层次中最近一个定位对象的左边界的位置。 
top:设置对象相对于文档层次中最近一个定位对象的上边界的位置。 
right:设置对象相对于文档层次中最近一个定位对象的右边界的位置。 
bottom:设置对象相对于文档层次中最近一个定位对象的下边界的位置。 

｛II｝

 ie6-ie8可使用可以直接用obj.style.top=100; 但在FireFox和ie9中必须加上单位，变成obj.style.top=100+'px'; style.left同理。

2、clientWidth = content + padding       clientHeight = content+ padding  （即：元素的clientWidth，clientHeight是指这个元素的包含补白在内的宽，高）
    clientWidth与clientHeight都是只读属性，
3、scrollHeight和scrollWidth属性，指包含滚动条在内的该元素的视觉面积。表示滚动条滚动的高度和宽度。
   滚动条滚动的垂直距离，是document对象的scrollTop属性；滚动条滚动的水平距离是document对象的scrollLeft属性。
4、offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。（注意：不适用于表格和iframe内的元素）
5、getBoundingClientRect()方法。它返回一个矩形对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。【为了兼容把body加上margin:0;padding:0，注意加DOCTYPE声明（有了它IE还是挺听话的）】