<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高） 
真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。

js获取页面高度的更多相关文章

  1. jquery、js获取页面高度宽度等

    jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...

  2. js获取页面高度赋值给div

    <script type="text/javascript"> window.onload=function(){ map_width=document.body.cl ...

  3. js 获取页面高度和宽度(兼容 ie firefox chrome),获取鼠标点击位置

    <script> //得到页面高度 var yScroll = (document.documentElement.scrollHeight >document.documentEl ...

  4. js里获取页面高度和文档高度

    $(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小,$(document).height()则代表了 ...

  5. 使用js获取页面的各种高度

    使用js获取相关高度: 获取网页被滚动条卷去的高度——兼容写法: scrollHeight = documen.body.scrollTop || document.documentElement.s ...

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

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

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

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

  8. JS获取div高度的方法

    有时在写页面时,需要获取一个div的高度.怎么才能获取呢?哈哈,先上结论.有两种方法. offsetHeight .clientHeight getComputedStyle offsetHeight ...

  9. JS获取页面数据执行Ajax请求

    下面这个例子展示了如何使用js获取页面中元素的值,并且将这些值作为参数执行Ajax请求. $("#submit-task").bind("click", fun ...

随机推荐

  1. oracle之复杂查询之一：多表连接技术

    复杂查询之一:多表连接技术 7.1 简单查询的解析方法: 全表扫描:指针从第一条记录开始,依次逐行处理,直到最后一条记录结束: 横向选择+纵向投影=结果集 7.2 多表连接 交叉连接(笛卡尔积) 非等 ...

  2. [HCTF 2018]admin wp

    首先打开页面,查看源码 you are not admin考虑是否为需要登录 后发现右上方有个登录 考虑密码爆破,用户名为admin,密码未知 摔进burpsuite后爆破 后得到密码为123 登录得 ...

  3. 预科班D6

    2020.09.14星期一 预科班D6 学习内容: 自习 发布小游戏 1.配置网络 #查看当前ip ifconfig #关闭NetworkManager systemctl stop NetworkM ...

  4. PYG2010-01-软件破解意义和程序流程简介笔记

  5. TIDB 笔记

    整体架构:

  6. 我没学过计算机，是怎么接了四个私活还挣了两个 iPad 的？

    你好,我是悟空哥,「7年项目开发经验,全栈工程师,开发组长,超喜欢图解编程底层原理」.我还手写了2个小程序,Java刷题小程序,PMP刷题小程序.我的 GitHub. 前言 大家看到这篇文章的时候,我 ...

  7. 时间轮算法在Netty和Kafka中的应用，为什么不用Timer、延时线程池？

    大家好,我是yes. 最近看 Kafka 看到了时间轮算法,记得以前看 Netty 也看到过这玩意,没太过关注.今天就来看看时间轮到底是什么东西. 为什么要用时间轮算法来实现延迟操作? 延时操作 Ja ...

  8. 关于Xilinx PCIE DMA的问答

    关于Xilinx PCIE DMA的问答 很久没上博客园了,但由于之前在博客园写了几篇关于PCIE DMA的文章,很多同学给我发消息询问相关知识点,之前有空的时候都是语音一小时跟人细讲,最近由于工作繁 ...

  9. Mindmaster破解版与正版

    1 免费版与正版 MindMaster思维导图软件,免费版没有过期时间可以一直使用,导出或者保存的文件没有水印.免费版和专业版的不同之处在于,专业版可以享受全功能,比如导出为可编辑的PDF.Offic ...

  10. C++ 关键字 enum

    转自:https://blog.csdn.net/cppwork/article/details/18814315 C++ 关键字 enum. 枚举 1.  概念 我们经常需要为某些属性定义一组可选择 ...