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 ...
随机推荐
- LA 6042 Bee Tower 记忆化搜索
一开始读漏了很多细节,用递推写死活跑不出样例. 把题目中的细节列一下吧,状态方程很好推,改成记忆化搜索之后代码也很清晰. 1.蜜蜂需要到最高的塔去,最高的塔可能不止一个,抵达任意一个即可. 2.蜜蜂每 ...
- (三)CSS高级语法
选择器分组 可以对选择器进行分组,被分组的选择器可以分享相同的声明,用逗号将需要分组的选择器分开.例如: h1,h2,h3,h4,h5,h6 { color: green; } 继承以及其问题一般,子 ...
- 自定义View(2)canas绘制基本图形的示例
效果 代码: void drawSample(Canvas canvas) { /* * 方法 说明 drawRect 绘制矩形 drawCircle 绘制圆形 drawOval 绘制椭圆 drawP ...
- Bug:java.lang.IllegalStateException
使用迭代的时候,出现了java.lang.IllegalStateException 代码: for ( TaskInfo info : userTaskInfos ) { if ( info.isC ...
- 利用Java自带的MD5加密java.security.MessageDigest;
MD5加密算法,即"Message-Digest Algorithm 5(信息-摘要算法)",它由MD2.MD3.MD4发展而来的一种单向函数算法(也就是HASH算法),它是国际著 ...
- 函数mem_area_alloc
/********************************************************************//** Allocates memory from a po ...
- 大流量IIS负载均衡NLB解决方案
说白了就是 用多台WEB服务器 同时处理大量的http请求! 机器越多力量越大呵呵!!! 在现行的许多网络应用中,有时一台服务器往往不能满足客户端的要求,此时只能通过增加服务器来解决问题. 那么 ...
- 淘宝技术发展（Java时代：脱胎换骨）
我的师父黄裳@岳旭强曾经说过,“好的架构图充满美感”,一个架构好不好,从审美的角度就能看得出来.后来我看了很多系统的架构,发现这个言论基本成立.那么反观淘宝前面的两个版本的架构,你看哪个比较美? 显然 ...
- Web网站的性能测试工具
随着Web 2.0技术的迅速发展,许多公司都开发了一些基于Web的网站服务,通常在设计开发Web应用系统的时候很难模拟出大量用户同时访问系统的实际情况,因此,当Web网站遇到访问高峰时,容易发生服务器 ...
- apache开源项目--subversion
Subversion exists to be universally recognized and adopted as an open-source, centralized version co ...