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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
DOM 事件流详解
Jan 20 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 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
DOMXML函数笔记
2006/10/09 PHP
PHP 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
Thinkphp搜索时首页分页和搜索页保持条件分页的方法
2014/12/05 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
Yii中表单用法实例详解
2016/01/05 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
使用js画图之正弦曲线
2015/01/12 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
vue+element实现批量删除功能的示例
2018/02/28 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
理解Python中函数的参数
2015/04/27 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
Python 处理数据的实例详解
2017/08/10 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
Python如何读写字节数据
2020/08/05 Python
婚前财产公证书
2014/04/10 职场文书
代理协议书
2014/04/22 职场文书
大学生党性分析材料
2014/12/19 职场文书
财政局长个人总结
2015/03/04 职场文书
化妆品促销活动总结
2015/05/07 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android