<script> 
function getInfo() 
{ 
var s = ""; 
s += " 网页可见区域宽："+ document.body.clientWidth; 
s += " 网页可见区域高："+ document.body.clientHeight; 
s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"; 
s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)"; 
s += " 网页正文全文宽："+ document.body.scrollWidth; 
s += " 网页正文全文高："+ document.body.scrollHeight; 
s += " 网页被卷去的高(ff)："+ document.body.scrollTop; 
s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop; 
s += " 网页被卷去的左："+ document.body.scrollLeft; 
s += " 网页正文部分上："+ window.screenTop; 
s += " 网页正文部分左："+ window.screenLeft; 
s += " 屏幕分辨率的高："+ window.screen.height; 
s += " 屏幕分辨率的宽："+ window.screen.width; 
s += " 屏幕可用工作区高度："+ window.screen.availHeight; 
s += " 屏幕可用工作区宽度："+ window.screen.availWidth; 
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"; 
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"; 
//alert (s); 
} 
getInfo(); 
</script> 
在我本地测试当中： 
在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的标准在作怪啊 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
如果在页面中添加这行标记的话

在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 的属性时, 不能再取到整个页面的值.

区别新旧标准的行是:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN” >
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
前者指明该页面使用旧标准, 后者指明该页面使用新标准.

总结:
XHTML中用 document.documentElement.clientHeight 代替
document.body.clientHeight

js获取网页宽高的更多相关文章

  1. JS获取网页宽高方法集合

    JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...

  2. 原生JS获取网页宽高

    网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offset ...

  3. JS获取元素宽高的两种情况

    JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用     document.getElementById('xxx'). ...

  4. js获取各种宽高方法

    屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth 网页可见区域宽:document.body.clientWidth 网页可见区域高 ...

  5. 原生JS获取元素宽高实践详解

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  6. js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等（带图片说明）

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;(点击查看大图) 网页可见区域宽: document.bo ...

  7. js获取网页屏高 屏宽

    <SCRIPT LANGUAGE="JavaScript"> <!-- //document.body.scrollTop 滚动条的上端距离 //document ...

  8. js获取屏幕宽高

    最近想自己实现一个全屏滚动. 结果一开始就遇到了问题.因为不知道如何获取一个页面屏幕的高度. 网上所有的博客都是复制粘贴. 网页可见区域宽:document.body.clientWidth 网页可见 ...

  9. js获取浏览器宽高

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

随机推荐

  1. minishift的本地代码构建

    看文档说支持,但实际尝试了下,失败 发现仍然是找github中的代码 找了半天,发现是在目录下有.git的隐含目录,然后copy到其他目录下删除,然后再试,发现仍然失败. 日志看是指定的目录并没有传入 ...

  2. html之marquee会移动的文字

    该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核,所以如果你使用非IE内核浏览器(如:Netscape)可能无法看到下面一些很有意思的效果 该标签是个容器标签 语法: <marqu ...

  3. python学习:基础概念

    Python 包管理工具解惑 python packaging 一.困惑 作为一个 Python 初学者,我在包管理上感到相当疑惑(嗯,是困惑).主要表现在下面几个方面: 这几个包管理工具有什么不同? ...

  4. mysql用法之创建事件

    1.创建事件:每天凌晨两点自动删除de_records表中七天以前的数据 CREATE EVENT event_delete_de_records_7days ON SCHEDULE EVERY 1 ...

  5. 3dsMAX 插件

    SDK C++ 对性能有要求 底层接口 MAXScript 上层接口 a few more function whick sdk does not afford MCG像蓝图一样的东西 http:// ...

  6. springMVC配置静态资源访问的<mvc:resources>标签的使用

    在springmvc中,为了引用资源的访问不会类似Controller一样被拦截,区分出关注的资源的访问,一般我们在springMVC里面的拦截都会配置为"/",拦截所有的.但是这 ...

  7. asp.net mvc 3 配置全局错误处理 Web.config中设置CustomError

    摘自: http://www.myexception.cn/web/1130191.html asp.net mvc 配置全局异常处理 Web.config中设置CustomError Web.con ...

  8. Java线程详细监控和其dump的分析使用—-分析Java性能瓶颈

    转载:https://www.cnblogs.com/firstdream/p/8109352.html 这里对linux下.sun(oracle) JDK的线程资源占用问题的查找步骤做一个小结: l ...

  9. CEdit自动换行和状态栏添加

    CEdit自动换行在对话框的属性中是可以直接设置的. Auto HScroll设置为False Auto VScroll设置为True Mulitline设置为True Want Return设置为T ...

  10. Cocos2d-x设置吞没单击属性来避免精灵重叠被点击后的事件续传

    代码如下: Size visibleSize = Director::getInstance()->getVisibleSize(); /* create two sprites which h ...