<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. OpenShift应用镜像构建(4) - fabric8-maven-plugin

    适合开发的构建fabric8-maven-plugin 在项目过程中越来越多的出现在开发阶段就需要把部分微服务直接做容器化发布,然后自己的代码还需要和这些发布后的微服务进行调用的开发过程,这个阶段基本 ...

  2. JAVA应用获取本机IP

    在应用开发的时候如何获取本机的IP呢? 本人在开发一个线上系统的时候有这样的需求,办法很简单啊,google一下,于是乎有了下面的代码: 方案一: Enumeration<NetworkInte ...

  3. fragment shader的优化

    ALU: 浮点数精度 选择性降低 shader 指令数 替换一些计算减小指令sqrt, sin, cos, recip 光照 计算用lightmap(用memory sample换计算) vertex ...

  4. git中报unable to auto-detect email address

    git commit 时报错: ** Please tell me who you are. Run git config --global user.email "you@example. ...

  5. HDU-2665-Kth number(划分树)

    Problem Description Give you a sequence and ask you the kth big number of a inteval.   Input The fir ...

  6. 正则表达式匹配a标签或div标签

    这里以a标签为例 a标签的href var a='<P><A href=\'~abc/ccg/ab.jpg\' width="3">文字</A> ...

  7. Solidworks如何隐藏零件细节，如何让零件变成一个输入

    先把东西另存为IGS格式   再次打开这个IGS文件,凡是看到这个对话框都选择取消,然后确定   打开之后,还是可以看到文件结构,但是再打开每个零件都变成了输入,所以就相当于隐藏了文件细节,不知道怎么 ...

  8. Git学习笔记三--管理修改、撤销修改、删除文件

    1.管理修改 什么是修改?比如你新增了一行,这就是一个修改,删除了一行,也是一个修改,更改了某些字符,也是一个修改,删了一些又加了一些,也是一个修改,甚至创建一个新文件,也算一个修改. 为什么说Git ...

  9. java检索文件时加入线程

    package xianChengSaomiao; import java.io.File; import java.util.ArrayList; import java.util.List; pu ...

  10. vue - for 遍历对象和遍历对象数组

    1. 遍历对象时,参数: 第一个为值,第二个为键名,第三个为索引 <!DOCTYPE html> <html lang="en"> <head> ...