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 ...
随机推荐
- SPOJ 1435 Vertex Cover 树形DP
i 表示节点 i ,j=0表示不选择其父节点,j=1表示选择其父节点.f 为其父节点. 取 每个节点选择/不选择 两者中较小的那个. 一组数据: 151 21 31 41 1010 910 1112 ...
- git branch
使用git管理工具,branch 应该是我们接触最多的.不论我们是修复bug,还是做项目,都会新开branch,工作完成后再合并. 然而对一些初学者,对git的一些命令知之甚少,这里,给大家写一些常用 ...
- 在oracle中where 子句和having子句中的区别
在oracle中where 子句和having子句中的区别 1.where 不能放在GROUP BY 后面 2.HAVING 是跟GROUP BY 连在一起用的,放在GROUP BY 后面,此时的作用 ...
- zlib用法说明
1. 如何获得zlib zlib的主页是:http://www.zlib.net/ 2. 用VC++6.0打开 把 下载的源代码解压打开,VC6.0的工程已经建好了,在\projects\visual ...
- LA 4127 - The Sky is the Limit (离散化 扫描线 几何模板)
题目链接 非原创 原创地址:http://blog.csdn.net/jingqi814/article/details/26117241 题意:输入n座山的信息(山的横坐标,高度,山底宽度),计算他 ...
- 关于post get ajax
今天写程序时 出现了下面问题: 前台 $.post('ajax/GetDataAjax.ashx', { 'mode': 'DEL', 'BM_ID': bm_id }, function (res ...
- busybox filesystem add ldd function
/******************************************************************** * busybox filesystem add ldd f ...
- UVA 10537 The Toll! Revisited 过路费（最短路，经典变形）
题意:给一个无向图,要从起点s运送一批货物到达终点e,每个点代表城镇/乡村,经过城镇需要留下(num+19)/20的货物,而经过乡村只需要1货物即可.现在如果要让p货物到达e,那么从起点出发最少要准备 ...
- LeetCode：Sort List
Title: Sort a linked list in O(n log n) time using constant space complexity. 思路:考虑快速排序和归并排序,但是我的快速排 ...
- (1)java设计模式之简单工厂模式
一:简单工厂模式的优点 --->在阎宏博士的<JAVA与模式>一书中开头是这样描述简单工厂模式的:简单工厂模式是类的创建模式,又叫做静态工厂方法(Static Fa ...