网页可见区域宽: 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.screen.height;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;
当前鼠标位置的X坐标:document.body.scrollLeft+event.clientX; 网页横向滚动条的左位置 + 事件源的X坐标
当前鼠标位置的Y坐标:document.body.scrollTop+event.clientY;
要注意的是scrollWidth和clientWidth的区别,顺带还有offsetWidth,手册上的说明:
scrollWidth:Retrieves the scrolling width of the object.
clientWidth:Retrieves the width of the object including padding, but not including margin, border, or scroll bar.
offsetWidth:Retrieves the width of the object relative to the layout or coordinate parent, as specified by the offsetParent property.
我的理解是(用Height容易测试):
scrollHeight是对象的内容的高度;clientHeight是对象的可视部分高度;offsetHeight是clientHeight加上border和滚动条本身高度。
可以看到clientHeight不受内容影响,都是83,即内容有没有超过对象高度都不受影响,但scrollHeight会受内容高度影响,而且从测试可以意识到:当有滚动条时,覆盖层的高度应该取scrollHeight(内容高度);当没有滚动条时,覆盖层的高度应该取clientHeight(视框高度)。而恰好两个情况都是取两者中比较大的值,所以就有了以下程序:
Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) "px";
设宽度时是不包括滚动条部分的而documentElement一般也没有border,所以不需要offsetWidth。
上面可以看到我用的是documentElement而不是body,手册上是这样说的:
Retrieves a reference to the root node of the document.
意 思是整个文档的根节点,其实就是html节点(body的上一级),注意这是在XHTML的标准下。上面可以看到我们取值的对象是整个文档而不只是 body,所以这里用documentElement。还要注意的是在onresize的时候scrollWidth和clientWidth的值会产生 变化,所以需要在事件中重新设置宽度高度:
if(isIE6){ this._size(); window.attachEvent("onresize", this._size); }