js获取网页高度(详细整理)


Posted in Javascript onDecember 28, 2012

网页可见区域宽: 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

<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
Javascript 相关文章推荐
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
如何优化vue打包文件过大
Apr 13 Vue.js
前台js改变Session的值(用ajax实现)
Dec 28 #Javascript
window.open的页面如何刷新(父页面)上层页面
Dec 28 #Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 #Javascript
jQuery基础框架浅入剖析
Dec 27 #Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 #Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 #Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 #Javascript
You might like
PHP打印输出函数汇总
2016/08/28 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
python数据处理实战(必看篇)
2017/06/11 Python
Flask数据库迁移简单介绍
2017/10/24 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
python三引号输出方法
2019/02/27 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
毕业生求职找工作的自我评价范文
2013/11/27 职场文书
应届实习生的自我评价范文
2014/01/05 职场文书
人民教师求职自荐信
2014/03/12 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
中学生检讨书范文
2014/11/03 职场文书
质量保证书格式
2015/02/27 职场文书
清洁工个人总结
2015/03/04 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书