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实现的分页函数
Dec 22 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
js实现导航跟随效果
Nov 17 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
Feb 06 Javascript
在js中修改html body的样式
Nov 11 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中加密解密函数与DES加密解密实例
2014/10/17 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
Python实现子类调用父类的方法
2014/11/10 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
python中import与from方法总结(推荐)
2019/03/21 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
Django CBV类的用法详解
2019/07/26 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
String s = new String(“xyz”);创建了几个String Object?
2015/08/05 面试题
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
小型女装店的创业计划书
2014/01/09 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
美丽人生观后感
2015/06/03 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python