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 相关文章推荐
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
谈一谈javascript闭包
Jan 28 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
May 10 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
vue+openlayers绘制省市边界线
Dec 24 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
jquery.validate使用详解
2016/06/02 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
python 中文乱码问题深入分析
2011/03/13 Python
python list 合并连接字符串的方法
2013/03/09 Python
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
总裁秘书岗位职责
2013/12/04 职场文书
留守儿童工作方案
2014/06/02 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
幼师求职自荐信
2015/03/26 职场文书
重阳节简报
2015/07/20 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
MySQL创建管理KEY分区
2022/04/13 MySQL