网页可见区域宽: 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
复制代码 代码如下:
在我本地测试当中:
在ie、firefox、opera下都可以使用
document.body.clientwidth
document.body.clientheight
即可获得,很简单,很方便。
而在公司项目当中:
opera仍然使用
document.body.clientwidth
document.body.clientheight
可是ie和firefox则使用
document.documentelement.clientwidth
document.documentelement.clientheight
原来是w3c的标准在作怪啊
如果在页面中添加这行标记的话
在ie中:
document.body.clientwidth ==> body对象宽度
document.body.clientheight ==> body对象高度
document.documentelement.clientwidth ==> 可见区域宽度
document.documentelement.clientheight ==> 可见区域高度
在firefox中:
document.body.clientwidth ==> body对象宽度
document.body.clientheight ==> body对象高度
document.documentelement.clientwidth ==> 可见区域宽度
document.documentelement.clientheight ==> 可见区域高度
?
在opera中:
document.body.clientwidth ==> 可见区域宽度
document.body.clientheight ==> 可见区域高度
document.documentelement.clientwidth ==> 页面对象宽度(即body对象宽度加上margin宽)
document.documentelement.clientheight ==> 页面对象高度(即body对象高度加上margin高)
而如果没有定义w3c的标准,则
ie为:
document.documentelement.clientwidth ==> 0
document.documentelement.clientheight ==> 0
firefox为:
document.documentelement.clientwidth ==> 页面对象宽度(即body对象宽度加上margin宽)document.documentelement.clientheight ==> 页面对象高度(即body对象高度加上margin高)
opera为:
document.documentelement.clientwidth ==> 页面对象宽度(即body对象宽度加上margin宽)document.documentelement.clientheight ==> 页面对象高度(即body对象高度加上margin高)
真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。
有时候需要取页面的底部, 就会用到document.body.clientheight , 在html 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句”hello world” , 也仍然取到720.
可是在xhtml中, 如果body 体中只有一行, 则document.body.clientheight 只能取到那一行的高度, 约20px, 这时如何还想取到整个页面的高度, 就要用document.documentelement.clientheight 来获取了.
原因是: 在html 中, body 是整个dom 的根, 而在xhtml 中, document 才是根, body 不再是根, 所以取body 的属性时, 不能再取到整个页面的值.
区别新旧标准的行是:
-//w3c//dtd html 4.0 transitional//en” >
-//w3c//dtd xhtml 1.0 transitional//en” “http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd“>
前者指明该页面使用旧标准, 后者指明该页面使用新标准.
总结:
xhtml中用 document.documentelement.clientheight 代替
复制代码 代码如下:
document.body.clientheight
