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 相关文章推荐
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
Node.js API详解之 module模块用法实例分析
May 13 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
前台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中curl_multi的应用
2013/07/17 PHP
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
php简单图像创建入门实例
2015/06/10 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
javascript 伪数组实现方法
2010/10/11 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
使用webpack打包koa2 框架app
2018/02/02 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
python邮件发送smtplib使用详解
2020/06/16 Python
python如何制作英文字典
2019/06/25 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
夜大毕业自我鉴定
2013/10/11 职场文书
大专生找工作自荐书
2014/06/10 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
一份文言文检讨书
2014/09/13 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js