注：此文属于转载自他人博客

网页可见区域宽： 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的标准在作怪啊 
<!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“> 
前者指明该页面使用旧标准, 后者指明该页面使用新标准.

JS获取网页高度和宽度的更多相关文章

  1. js获取网页高度和宽度(备份)

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

  2. js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

    js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...

  3. 【转】js 获取浏览器高度和宽度值(多浏览器

    原文地址:http://www.jb51.net/article/19844.htm js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ...

  4. js 获取浏览器高度和宽度值(多浏览器)（转）

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

  5. 转：JS获取浏览器高度和宽度

    发现一篇好文章,汇总到自己的网站上. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> ...

  6. js 获取浏览器高度和宽度值(多浏览器)

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

  7. 不同浏览器JS获取浏览器高度和宽度

    摘自:http://blog.csdn.net/lai_gb/archive/2009/07/04/4320956.aspx IE中: document.body.clientWidth ==> ...

  8. JQuery+Js 获取浏览器高度和宽度

    JQuery-------做手机Web开发做浏览器兼容用到了,所以在网上找了些汇总下. alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(docum ...

  9. JS获取浏览器高度和宽度

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

随机推荐

  1. 轮廓算法的结果验证工具/How to validate the outline output

    因为轮廓算法的结果通过直接观察输出很难判断结果的正确性. 但是如果把输入和输出同时绘制出来,用眼睛判别则相对简单许多. 输入建筑的文件内容格式为,粗体格式为建筑高度: 10 110 5020 60 7 ...

  2. 2015/8/9 到家了，学完了CodeCademy的Python

    昨天坐了20多个小时的硬座回家.发现在网络信号差的火车上也是学习的好地方.如果你的手机电量不足的话,带上两本书简直是绝配.我在火车上阅读了两百多页的内容,并没有多大的疲累,那样无聊的环境里面能看书学习 ...

  3. Cycle Sort

    Cycle sort的思想与计数排序太像了,理解了基数排序再看这个会有很大的帮助, 圈排序与计数排序的区别在于圈排序只给那些需要计数的数字计数,先看完文章吧,看完再回来理解这一句话 所谓的圈的定义,我 ...

  4. bzoj 2705: [SDOI2012]Longge的问题——欧拉定理

    Description Longge的数学成绩非常好,并且他非常乐于挑战高难度的数学问题.现在问题来了:给定一个整数N,你需要求出∑gcd(i, N)(1<=i <=N). Input 一 ...

  5. bzoj 3028 母函数

    首先我们可以求出来所有食物的母函数: 汉堡:f(x)=1/(1-x^2). 可乐:f(x)=1+x. 鸡腿:f(x)=1+x+x^2. 蜜桃多:f(x)=x/(1-x^2). 鸡块:f(x)=1/(1 ...

  6. C# IEqualityComparer 使用方法 Linq Distinct使用方法

    创建 IEqualityComparer的接口类必须实现Equals和GetHashCode方法 public class TipComparer : IEqualityComparer<Tip ...

  7. css文本垂直水平居中

    一.单行文本居中 .content{ height:100px; line-height:100px; text-align:center; border:1px solid red; } 效果图 二 ...

  8. 结合BeautyEye开源UI框架实现的较美观的Java桌面程序

    BeautyJavaSwingRobot 结合BeautyEye开源UI框架实现的较美观的Java桌面程序,主要功能就是图灵机器人和一个2345网站万年历的抓取.... 挺简单而且实用的一个项目,实现 ...

  9. Java多态的实现原理

    1.多态的定义:指允许不同类的对象,对同一消息作出响应: 即同一消息可以根据发送对象的不同采用多种不同的行为方式: 2.多态的实现技术:动态绑定: 指在执行期间判断所引用对象的实际类型,根据其实际的类 ...

  10. C++学习之路（七）：以const，enum，inline替换#define

    这篇博文主要是编程中的一些问题和技巧.如题目所示,这些关键字的作用不再进行描述.直接描述功能和实例代码. 首先,在头文件中对类进行定义,是不会为类分配内存空间的,在这一点上类定义可以和普通变量类型的声 ...