原文:http://www.jb51.net/article/41410.htm

1.区别: 
body是DOM对象里的body子节点,即 <body> 标签; 
documentElement 是整个节点树的根节点root,即<html> 标签;

2.没使用DTD情况即怪异模式BackCompat下:

代码如下:

document.documentElement.clientHeight=0document.body.clientHeight=618 
 
 

使用DTD情况即标准模式CSS1Compat下:

代码如下:

document.documentElement.clientHeight=618 document.body.clientHeight=28(表示内容的高度) 
 
3.提取浏览器的尺寸是要注意了。可以参考以下代码: 
 
代码如下:

if (document.compatMode == "BackCompat") { 
cWidth = document.body.clientWidth; 
cHeight = document.body.clientHeight; 
sWidth = document.body.scrollWidth; 
sHeight = document.body.scrollHeight; 
sLeft = document.body.scrollLeft; 
sTop = document.body.scrollTop; 

else { //document.compatMode == "CSS1Compat" 
cWidth = document.documentElement.clientWidth; 
cHeight = document.documentElement.clientHeight; 
sWidth = document.documentElement.scrollWidth; 
sHeight = document.documentElement.scrollHeight; 
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft; 
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop; 
}
 
 
ps:另一个链接:http://blog.sina.com.cn/s/blog_51c99bb20100wqvb.html
获取当前页面的滚动条纵坐标:document.documentElement.scrollTop
网页被卷去的高: document.body.scrollTop; 
在标准w3c下,document.body.scrollTop恒为0,需要用document.documentElement.scrollTop来代替;
 

document.documentElement和document.body区别以及获取浏览器的宽高的更多相关文章

  1. Js怎么获取DOM及获取浏览器的宽高?

    在JavaScript中,经常会需要获取document文档元素,是HTML文档对象模型的缩写,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. ...

  2. JQuery-- 获取元素的宽高、获取浏览器的宽高和垂直滚动距离

    * 能够使用jQuery设置尺寸 * .width() width * .innerWidth() width + padding * .outerWidth() width + padding + ...

  3. js获取浏览器内容宽高(小计)

    <SCRIPT LANGUAGE="JavaScript">var  s = "";s += "\r\n网页可见区域宽:"+ d ...

  4. JQ 获取浏览器窗口宽高

    $(window).height(); // 浏览器时下窗口可视区域高度 $(document).height(); //浏览器时下窗口文档的高度 $(document.body).height(); ...

  5. 【转】document.documentElement和document.body的区别

    转自:http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html 网页中获取滚动条卷去部分的高度,可以通过 document.body ...

  6. document.documentElement和document.body的区别

    网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: <div id="div" style=&qu ...

  7. document.documentElement和document.body区别介绍

    document.documentElement和document.body区别介绍 * 区别 body是DOM对象黎明的body子节点,即标签 docummentElement 是整个树的根节点ro ...

  8. js中document.documentElement 和document.body 以及其属性 clientWidth等

    在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...

  9. 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】

    前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...

随机推荐

  1. Flex读取txt文件里的内容报错

    Flex读取txt文件里的内容 1.详细错误例如以下 2.错误原因 读取文件不存在 var file:File = new File(File.applicationDirectory.nativeP ...

  2. [转]为什么我说ORM是一种反模式

    原文地址:http://www.nowamagic.net/librarys/veda/detail/2217 上周我在在上讨论了ORM,在那以后有人希望我澄清我的意思.事实上,我曾经写文章讨论过OR ...

  3. liunx系统安装composer与配置

    1.下载composer curl -sS https://getcomposer.org/installer | php 2.我把它放在系统的PATH目录中,这样就能在全局访问它. mv compo ...

  4. JavaScript中trim 方法实现

    Java中的 String 类有个trim() 能够删除字符串前后的空格字符.jQuery中也有trim()方法能够删除字符变量前后的字符串. 可是JavaScript中却没有对应的trim() 方法 ...

  5. jQuery + Cookie引导客户操作

    网址:http://www.sucaihuo.com/js/707.html 示例:http://www.sucaihuo.com/jquery/7/707/demo/

  6. Entity Framework中的主从表关系的使用

    其关系图: 我们使用Entity Framework生成映射关系如下: 其中author表中的books导航属性为一个集合,表示当前作者的书. 在页面中我们可以使用如下代码来实现: 代码中author ...

  7. C++ 矩阵计算库 :Eigen库

    Eigen http://eigen.tuxfamily.org/index.php?title=Main_Page 下载http://bitbucket.org/eigen/eigen/get/3. ...

  8. Golang中的正则表达式

    声明:文章转自GoLove 用法: 单一: . 匹配任意一个字符,如果设置 s = true,则可以匹配换行符 [字符类] 匹配"字符类"中的一个字符,"字符类" ...

  9. IO-Polling的代码分析

    在前一篇文章<IO-Polling实现分析与性能评測>中提到了IO-Polling与中断的原理差别,并通过两种模式下NVMe SSD的性能測试对两者进行了对照. 这篇文章将深入到IO-Po ...

  10. ios中的coredata

    本文转载至 http://blog.csdn.net/chen505358119/article/details/9334831 分类: ios2013-07-15 18:12 12449人阅读 评论 ...