在我看《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. 公交wifi运营平台分析

    一.前言背景 昨晚下午,老板让看一些车载公交wifi后台管理的一些东西,这个随着移动端设备而兴起的wifi战,慢慢的也会越演越烈. 现在于很多人在外面的时候,进入一家店首先看的不是菜单,而是问一句“你 ...

  2. (七)CSS定位(Positioning)

    CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...

  3. JVM学习笔记(二)------Java代码编译和执行的整个过程

    Java代码编译是由Java源码编译器来完成,流程图如下所示: Java字节码的执行是由JVM执行引擎来完成,流程图如下所示: Java代码编译和执行的整个过程包含了以下三个重要的机制: Java源码 ...

  4. ASP.NET Web API上实现 Web Socket

    1. 什么是Web Socket Web Socket是Html5中引入的通信机制,它为浏览器与后台服务器之间提供了基于TCP的全双工的通信通道.用以替代以往的LongPooling等comet st ...

  5. 信号量及PV原语

    操作系统中进程互斥和同步的实现的一个最基本的方方是使用信号量和PV原语. 信号量S的物理意义:当S≥0的时候表示,某个资源可以使用的数量,当S<0的时候,其绝对值表示等待某个资源的进程数. 一般 ...

  6. LA 4123 (计数 递推) Glenbow Museum

    题意: 这种所有边都是垂直或水平的多边形,可以用一个字符串来表示,一个270°的内角记作O,一个90°的内角记作R. 如果多边形内存在一个点,能看到该多边形所有的点,则这个多边形对应的序列是合法的.这 ...

  7. HTML5全球普及加速:有望终结iOS与安卓界限【转】

    HTML5或将成为未来移动互联网时代的颠覆者. 5年前,当第一台iPhone诞生时,乔布斯断然拒绝了FlashPlayer,而选择HTML5(新型网页标准)取代Flash的功能.他曾预言,“虽然现阶段 ...

  8. MySQL基础之第10章 查询数据

    10.1.基本查询语句 SELECT 属性列表 FROM 表名和视图列表[WHERE条件表达式1][GROUPBY 属性名1 [HAVING条件表达式2]][ORDERBY 属性名2[ASC|DESC ...

  9. #define offsetof(TYPE, MEMBER) ((size_t) &((TYPE *)0)->MEMBER)

    #define offsetof(TYPE, MEMBER) ((size_t) &((TYPE *)0)->MEMBER)宏的运行机理:1. ( (TYPE *)0 ) 将零转型为TY ...

  10. [Everyday Mathematics]20150115

    试计算积分 $$\bex \int_{-\pi}^\pi \frac{\sin nx}{(1+2^x)\sin x}\rd x, \eex$$ 其中 $n$ 是自然数.