document.documentElement和document.body区别以及获取浏览器的宽高
原文：http://www.jb51.net/article/41410.htm
1.区别：
body是DOM对象里的body子节点，即 <body> 标签；
documentElement 是整个节点树的根节点root，即<html> 标签；
2.没使用DTD情况即怪异模式BackCompat下：
代码如下:
使用DTD情况即标准模式CSS1Compat下：
代码如下:
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;
}
获取当前页面的滚动条纵坐标：document.documentElement.scrollTop
网页被卷去的高： document.body.scrollTop;
在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替;
document.documentElement和document.body区别以及获取浏览器的宽高的更多相关文章
- Js怎么获取DOM及获取浏览器的宽高？
在JavaScript中,经常会需要获取document文档元素,是HTML文档对象模型的缩写,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. ...
- JQuery-- 获取元素的宽高、获取浏览器的宽高和垂直滚动距离
* 能够使用jQuery设置尺寸 * .width() width * .innerWidth() width + padding * .outerWidth() width + padding + ...
- js获取浏览器内容宽高（小计）
<SCRIPT LANGUAGE="JavaScript">var s = "";s += "\r\n网页可见区域宽:"+ d ...
- JQ 获取浏览器窗口宽高
$(window).height(); // 浏览器时下窗口可视区域高度 $(document).height(); //浏览器时下窗口文档的高度 $(document.body).height(); ...
- 【转】document.documentElement和document.body的区别
转自:http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html 网页中获取滚动条卷去部分的高度,可以通过 document.body ...
- document.documentElement和document.body的区别
网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: <div id="div" style=&qu ...
- document.documentElement和document.body区别介绍
document.documentElement和document.body区别介绍 * 区别 body是DOM对象黎明的body子节点,即标签 docummentElement 是整个树的根节点ro ...
- js中document.documentElement 和document.body 以及其属性 clientWidth等
在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...
- 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】
前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...
随机推荐
- JavaScript之变量、作用域和内存问题
js中的变量可能包含2种数据类型,基础数据类型和引用数据类型. 一般而言,基本数据类型是数据段,引用数据类型是对象. 保存方式的不同: 基本类型可以直接操作保存在变量中的值:而引用类型真实的值是保存在 ...
- mysql之load语句
LOAD DATA LOCAL INFILE 'data.txt' INTO TABLE tbl_name
- LeetCode406. Queue Reconstruction by Height Add to List
Description Suppose you have a random list of people standing in a queue. Each person is described b ...
- 以css为例谈设计模式
什么是设计模式? 曾有人调侃,设计模式是工程师用于跟别人显摆的,显得高大上:也曾有人这么说,不是设计模式没用,是你还没有到能懂它,会用它的时候. 先来看一下比较官方的解释:"设计模式(Des ...
- Android中*_handle_t/ANativeWindowBuffer/ANativeWindow/GraphicBuffer/Surface的关系
在阅读SurfaceFlinger HardwareComposer以及gralloc相关代码的过程中,我们经常会遇到native_handle private_handle_t ANativeWin ...
- c++标准库之thread
class thread是对线程的抽象.以下分别介绍thread是如何表示线程的大部分特征的. 执行体 线程的执行体由一个可执行(callable)对象来表示.这个执行体可以在thread创建的时候指 ...
- 怎么用源程序把ChemDraw结构复制到Word文档
在学习化学过程中,不可避免的会接触到各种化学结构.这个时候就需要通过绘制化学结构来进行这方面的学习和传播.ChemDraw Professional 15就可以辅助完成这方面的工作.很多的用户朋友会通 ...
- 去OpenCVManager，大部分为转载，仅当自己学习使用
去OpenCVManager方法,可以参考这篇博客http://blog.csdn.net/yanzi1225627/article/details/27863615,可以用,挺好的.我这里只是做个总 ...
- 转:: 刺鸟：用python来开发webgame服务端（4）
来源:http://ciniao.me/article.php?id=14 --------------- 刺鸟原创文章,转载请注明出处 前面的工作都已准备就绪,现在我们得来看看服务端怎么和客户 ...
- kafka 集群安装过程
1.下载需要的安装包 http://kafka.apache.org/downloads.html 本文使用的 Scala 2.9.2 - kafka_2.9.2-0.8.2.2.tgz (asc, ...