在我看《JavaScript高级程序设计》(第三版)的时候,在clientHeightscrollHeight那部分把我弄糊涂了。

原书是这样写的:( //宽度同理,就不仔细描述了。)

  “对于不包含滚动条的页面来说,scrollHeightclientHeight之间的关系不明确。在基于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的更多相关文章

  1. document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)

    document.documentElement.clientHeight 与 document.body.clientHeight用来获取页面可视高度我觉得有点问题.这两个应该不是一个东西. 页面中 ...

  2. [No000068]document.body.clientHeight 和 document.documentElement.clientHeight 的区别

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  3. document.body.clientHeight和 document.documentElement.clientHeight 的区别

    1.javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 在往同事负责的页面添加我的功 ...

  4. window.innerHeight与document.documentElement.clientHeight与document.body.clientHeight区别

    window.innerHeight属于BOM(浏览器对象模型),获取的高度包含横向滚动条 document.documentElement.clientHeight属于文档对象模型,不包含横向滚动条 ...

  5. document.documentElement.clientHeight 和 document.body.clientHeight

    document.documentElement.clientHeight 和 document.body.clientHeight 介绍 在进行一些网页效果处理的时候,经常碰到document.do ...

  6. JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  7. document.documentElement和document.body 与document.compatMode的关系

    首先我们看看document.compatMode(兼容模式): document.compatMode它有两种可能的返回值:BackCompat和CSS1Compat, document.compa ...

  8. document.body、document.documentElement和window获取视窗大小的区别

    来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...

  9. document.body、document.documentElement和window获取视窗大小的差别

    来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗体大小的三种方法(浏览器的视口,不包含工具栏和滚动栏). 对于In ...

随机推荐

  1. vmware shared holder 虚拟机设置共享目录

    1, 安装 vm-tools http://askubuntu.com/questions/29284/how-do-i-mount-shared-folders-win7-host-in-ubunt ...

  2. Ubuntu下jdk配置

    在Oracle官网下载linux版本的以tar.gz结尾的jdk建立文件夹用来存放解压后的jdksudo mkdir /usr/java进入jdk下载文件夹,解压并存放jdksudo tar zxvf ...

  3. GIT使用教程与基本原理

    转自:http://blog.csdn.net/wengpingbo/article/details/8985132 说明:该教程全部图片都来自于<pro git>.以下所有的操作,除非特 ...

  4. bzoj3747

    经典题,记录每个位置对应数下次出现的位置next[i] 每个位置维护当前左端点下到这个位置的和 随着左端点的右移一位到i+1,对[i+1,next[i]-1] 的影响是-a[i], [next[i], ...

  5. UVa 11174 (乘法逆元) Stand in a Line

    题意: 有n个人排队,要求每个人不能排在自己父亲的前面(如果有的话),求所有的排队方案数模1e9+7的值. 分析: <训练指南>上分析得挺清楚的,把公式贴一下吧: 设f(i)为以i为根节点 ...

  6. Java [Leetcode 318]Maximum Product of Word Lengths

    题目描述: Given a string array words, find the maximum value of length(word[i]) * length(word[j]) where ...

  7. 【C#学习笔记】类构造函数使用

    using System; namespace ConsoleApplication { class stu { private string name; private int age; publi ...

  8. Live555中RTP包的打包与发送过程分析

    这里主要分析一下,live555中关于RTP打包发送的部分.在处理完PLAY命令之后,就开始发送RTP数据包了(其实在发送PLAY命令的response包之前,就会发送一个RTP包,这里传输就已经开始 ...

  9. css清除浮动的两种方式(clearfix和clear)

    最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...

  10. Jquery获取第一个子元素

    如获取id为divId的div下的第一个子div $("#divId").children("div").get(0) 但得到的是一个dom对象,如果要得到Jq ...