document.documentElement.clientHeight||document.documentElement.scrollHeight
在我看《JavaScript高级程序设计》（第三版）的时候，在clientHeight和scrollHeight那部分把我弄糊涂了。
原书是这样写的：（ //宽度同理，就不仔细描述了。）
“对于不包含滚动条的页面来说,scrollHeight和clientHeight之间的关系不明确。在基于document.docuemntElement查看模式下，各个浏览器表现出不一样的性质。
- 在FF下，这两组属性始终相等，是文档实际大小，非视口大小。
- 在Opera、safari、Chorme中，scrollHeight是视口大小，而clientHeight是文档大小。
- 在IE非标准模式中，scrollHeight是文档大小，clientHeight是视口大小。”
经过我亲手实验，我把结论写在下面。
先新建一个文档，并通过样式表，让文档高度等于3000px
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{ height: 3000px;} //让文档的大小产生滚动条，高度为3000px;
</style>
</head>
<body> </body>
</html>
接着就是实验环节
<script>
window.onload = function(){
//大于IE7，safari,ff,chorme都显示为视口大小，随浏览器缩小而减小
alert(document.documentElement.clientHeight);
//始终等于文档的大小，小于IE7的显示为视口大小。
alert(document.documentElement.scrollHeight);
}
</script>
接着测试了一下基于document.body的模式下，无论大部分都是显示为body元素的height，3000px；
在IE下，document.body.clientHeight为3000，scrollHeight则不是。（要兼容低版本IE确实要一番功夫）
综上所述，在我们要获取文档实际高度时，最好用document.documentElement.scrollHeight。
在我们要获取视口实际高度时，用document.documentElement.clientHeight。
document.documentElement.clientHeight||document.documentElement.scrollHeight的更多相关文章
- document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)
document.documentElement.clientHeight 与 document.body.clientHeight用来获取页面可视高度我觉得有点问题.这两个应该不是一个东西. 页面中 ...
- [No000068]document.body.clientHeight 和 document.documentElement.clientHeight 的区别
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...
- document.body.clientHeight和 document.documentElement.clientHeight 的区别
1.javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 在往同事负责的页面添加我的功 ...
- window.innerHeight与document.documentElement.clientHeight与document.body.clientHeight区别
window.innerHeight属于BOM(浏览器对象模型),获取的高度包含横向滚动条 document.documentElement.clientHeight属于文档对象模型,不包含横向滚动条 ...
- document.documentElement.clientHeight 和 document.body.clientHeight
document.documentElement.clientHeight 和 document.body.clientHeight 介绍 在进行一些网页效果处理的时候,经常碰到document.do ...
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- document.documentElement和document.body 与document.compatMode的关系
首先我们看看document.compatMode(兼容模式): document.compatMode它有两种可能的返回值:BackCompat和CSS1Compat, document.compa ...
- document.body、document.documentElement和window获取视窗大小的区别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...
- document.body、document.documentElement和window获取视窗大小的差别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗体大小的三种方法(浏览器的视口,不包含工具栏和滚动栏). 对于In ...
随机推荐
- netty websocket协议开发
websocket的好处我们就不用多说了,就是用于解决长连接.服务推送等需要的一种技术. 以下我们来看一个例子: package com.ming.netty.http.websocket; impo ...
- Android下HelloWorld项目的R.java文件介绍
R.java文件介绍 HelloWorld工程中的R.java文件 package com.android.hellworld; public final class R { public s ...
- 用git difff 生成补丁
http://stackoverflow.com/questions/1191282/how-to-see-the-changes-between-two-commits-without-commit ...
- [HDOJ4738]Caocao's Bridges（双联通分量，割边，tarjan）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4738 给一张无向图,每一条边都有权值.找一条割边,使得删掉这条边双连通分量数量增加,求权值最小那条. ...
- 双方都在线，qq总是离线发文件
这是qq支持多地登录后出现的问题. 原因:1.当您传文件给对方,对方是多终端登录(或者开通移动在线功能)的情况下,为了保证对方一定能收到该文件,我们会智能的为用户切换到离线文件,对方会相应在所在的终端 ...
- gsp序列模式挖掘
数据挖掘进阶之序列模式挖掘GSP算法 绪 继续数据挖掘方面算法的讲解,前面讲解了数据挖掘中关联规则算法FP-Growth的实现.此篇博文主要讲解基于有趣性度量标准的GSP序列模式挖掘算法.有关论文后期 ...
- Hibernate+JPA (EntityMange讲解)
近年来ORM(Object-Relational Mapping)对象关系映射,即实体对象和数据库表的映射)技术市场人声音鼎沸,异常热闹, Sun在充分吸收现有的优秀ORM框架设计思想的基础上,制定了 ...
- libogg.so fro android编译方法
在网站下载源代码http://www.xiph.org/downloads/ 解压然后打开cygwin配置 CXX=arm-linux-androideabi-g++.exe LD=arm-linux ...
- IOS的XML文件解析，利用了NSData和NSFileHandle
如果需要了解关于文档对象模型和XML的介绍,参看 http://www.cnblogs.com/xinchrome/p/4890723.html 读取XML 上代码: NSFileHandle *fi ...
- (4) Spring中定时任务Quartz集群配置学习
原 来配置的Quartz是通过spring配置文件生效的,发现在非集群式的服务器上运行良好,但是将工程部署到水平集群服务器上去后改定时功能不能正常运 行,没有任何错误日志,于是从jar包.JDK版本. ...