菜单

页面的高度与宽度问题

2010年04月8日 - html

网页可见区域宽: 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;

网页正文部分左: window.screenLeft;

屏幕分辨率的高: window.screen.height;

屏幕分辨率的宽: window.screen.width;

屏幕可用工作区高度: 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); }

发表评论

电子邮件地址不会被公开。 必填项已用*标注