原文: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. OpenURL的一些用法

    openURL的使用方法: view plaincopy to clipboardprint? [[UIApplication sharedApplication] openURL:[NSURL UR ...

  2. ashx后门

    一.标准ASPX一句话木马 .NET平台下的一句话木马则百年不变,最常见的当属下面这句 <%@ Page Language=”Jscript”%><%eval(Request.Ite ...

  3. Python常见经典 python中if __name__ == '__main__': 的解析

    当你打开一个.py文件时,经常会在代码的最下面看到if __name__ == '__main__':,现在就来介 绍一下它的作用. 模块是对象,并且所有的模块都有一个内置属性 __name__.一个 ...

  4. ZOJ 3963 Heap Partition set维护。给一个序列,将其划分成尽量少的序列,使每一个序列满足按照顺序构造二叉树,父母的值<=孩子的值。

    Heap Partition Time Limit: Seconds Memory Limit: KB Special Judge A sequence S = {s1, s2, ..., sn} i ...

  5. iframe定位获取

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. spark hive结合杂记(hive-site.xml)

    1.下载spark源码,在spark源码目录下面有个make-distribution.sh文件,修改里面的参数,使编译后能支持hive,修改后执行该文件.(要预先安装好maven才能编译). 2.将 ...

  7. 远程连接windows时剪贴板失效解决方法

    1:打开任务管理器2:找到结束进程rdpclip,找不到可以不管.3:手工新建任务里输入rdpclip,运行即可.

  8. ubuntu16.04 一些简单软件安装操作

    1.ubuntu下的python指令指向python3.5(默认是指向python2.7) /usr/bin目录下 sudo ln -sf ./python3.5 ./python 2.安装pycha ...

  9. vs报错找不到错在哪里!Validation failed for one or more entities

    今天在处理Entity Framework修改数据库时,报错: Validation failed for one or more entities. See 'EntityValidationErr ...

  10. java图片二进制相互转换

    import java.awt.image.BufferedImage; import java.io.ByteArrayInputStream; import java.io.ByteArrayOu ...