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 ...
随机推荐
- JAVA将Excel中的报表导出为图片格式（一）问题背景
如题所示,先抛出一个问题,如何使用JAVA将Excel中的报表导出为图片格式? 首先说一下这个问题的背景,也就是为什么博主会碰到这个问题 随着微信,易信之流大行其道,企业内部的办公交流.绩效考评甚至考 ...
- bzoj3272 3638
好题,这道题可以用线段树来快速模拟费用流寻找最长增广路 这样修改怎么做也很显然了 type node=record s,lx,rx,mx,lp,rp,pb,pe:longint; end; ..*,. ...
- 【笨嘴拙舌WINDOWS】伟大的变革
"改革"."革命"."变革" 这几个词语毫无疑问是每一个时代必须被呼吁的词语,当一个国家没有人求变时,那是一个时代的悲剧.无论是文景之治,贞 ...
- EASYUI+MVC4通用权限管理平台
通用权限案例平台在经过几年的实际项目使用,并取得了不错的用户好评.在平台开发完成后,特抽空总结一下平台知识,请各位在以后的时间里,关注博客的更新. 1.EASYUI+MVC4通用权限管理平台--前言 ...
- Java Web编程的主要组件技术——JSP
参考书籍:<J2EE开源编程精要15讲> JSP(Java Server Page)页面由HTML代码和嵌入其中的Java代码组成. 简单的JSP页面如: <html> < ...
- jrtplib跨网络通讯NAT穿透问题解决方法
前几篇文章讲了使用jrtplib在Android和pc端进行通讯的方法 在实际项目中,手机端和pc端一般不会在同一个子网内,两者之间联络可能要走路由器之类的NAT(网络地址转换 Network Add ...
- MPI编程的常用接口速查
获取当前时间 在插入MPI提供的头文件后,可以获得获取时间的函数. double MPI_Wtime(void) 取得当前时间, 计时的精度由 double MPI_Wtick(void) 取得作为对 ...
- NYOJ-779-兰州烧饼
[题目链接:NYOJ-779] 兰州烧饼 时间限制:1000 ms | 内存限制:65535 KB 难度:1 描述 烧饼有两面,要做好一个兰州烧饼,要两面都弄热.当然,一次只能弄一个的话,效率 ...
- 怎么制作生成苹果手机app应用的下载二维码图片
原文网址:http://jingyan.baidu.com/article/8065f87ff654262331249886.html app store应用生成二维码操作步骤: 1.首先在MAC上的 ...
- Oracle RAC环境下如何更新patch(Rolling Patch)
Oracle RAC数据库环境与单实例数据库环境有很多共性,也有很多异性.对于数据库补丁的更新同样如此,都可以通过opatch来完成.但RAC环境的补丁更新有几种不同的更新方式,甚至于可以在零停机的情 ...