常见的属性：

网页可见区域宽： 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还是挺听话的)】