【转】document.documentElement和document.body的区别
转自：http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html
网页中获取滚动条卷去部分的高度，可以通过 document.body.scrollTop 来获取，比如使div跟着滚动条滚动：
<div id="div" style="width:100px;height:100px;background:#ccc;position:absolute;"></div>
window.onscroll = function ()
{
var div = document.getElementById("div");
div.style.top = document.body.scrollTop + "px";
}
运行后没有达到预期效果，输出 document.body.scrollTop 的值一看，一直都是 0。一翻折腾，原来是 DTD 的问题，要是页面直接用 <html> 开头的话就没有问题了。但是要符合 web 标准，DTD 当然是不能少的。
如果有 DTD 时用，那就用 document.documentElement.scrollTop 代替 document.body.scrollTop 就可以了。
window.onscroll = function ()
{
var oFix = document.getElementById("divfix");
oFix.style.top = document.documentElement.scrollTop + "px";
}
DTD相关说明：
页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。
页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。
在 IE 和 Firefox 中均是如此。
为了兼容，不管有没有 DTD，可以使用如下代码：
var scrollTop = window.pageYOffset //用于FF
|| document.documentElement.scrollTop
|| document.body.scrollTop
|| 0;
documentElement 和 body 相关说明：
body是DOM对象里的body子节点，即 <body> 标签；
documentElement 是整个节点树的根节点root，即<html> 标签；
DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。
以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。
【转】document.documentElement和document.body的区别的更多相关文章
- document.documentElement和document.body区别介绍
document.documentElement和document.body区别介绍 * 区别 body是DOM对象黎明的body子节点,即标签 docummentElement 是整个树的根节点ro ...
- document.documentElement和document.body的区别
网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: <div id="div" style=&qu ...
- 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】
前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...
- js中document.documentElement 和document.body 以及其属性 clientWidth等
在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...
- document.documentElement 和document.body 以及其属性
js中document.documentElement 和document.body 以及其属性 (原来HTML里是document.body --XHTML里是document.documentE ...
- 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth
变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...
- document.documentElement和document.body 与document.compatMode的关系
首先我们看看document.compatMode(兼容模式): document.compatMode它有两种可能的返回值:BackCompat和CSS1Compat, document.compa ...
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部
DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...
- document.documentElement和document.body区别
body是DOM对象里的body子节点,即body标签, documentElement 是整个节点树的根节点root, 详细介绍请看本文,感兴趣的朋友可以参考下 区别: body是DOM对象里的 ...
随机推荐
- gnuplot 学习笔记
1 如何运行 gnuplot是一个命令行输入的工具,把命令行写入一个文本file1 file2.使用下列方式运行. gnuplot {option} file1 file2 2 产生一个图标,不管数据 ...
- 匈牙利算法 cojs.tk 搭配飞行员
cojs.tk 搭配飞行员 ★★☆ 输入文件:flyer.in 输出文件:flyer.out 简单对比时间限制:1 s 内存限制:128 MB [问题描述] 飞行大队有若干个 ...
- Linux (二) vi
1 步骤 1) vi test.txt 进入一般模式 2) i 进入编辑模式,输入内容 3) Esc 回到一般模式 4) :wq 存储后退出 2 编辑模式 [i] 光标处插入, ...
- 谷歌开源项目Google Preview Image Extractor(PIEX) (附上完整demo代码)
前天偶然看到谷歌开源项目中有一个近乎无人问津的项目Google Preview Image Extractor(PIEX) . 项目地址: https://github.com/google/piex ...
- activiti自定义流程之整合（三）：整合自定义表单创建模型
本来在创建了表单之后应该是表单列表和预览功能,但是我看了看整合的代码,和之前没有用angularjs的基本没有什么变化,一些极小的变动也只是基于angularjs的语法,因此完全可以参考之前说些的表单 ...
- 2014 Super Training #7 C Diablo III --背包问题(DP)
原题: ZOJ 3769 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3769 一个带有一些限制的背包问题. 假设在没有限 ...
- java 16 -7 泛型方法和泛型接口（泛型类相似）
写一个ObjectTool类 泛型方法:把泛型定义在方法上 格式 public <泛型类型> 返回类型 方法名(泛型类型) 这样的好处是: 这个泛型方法可以接收任意类型的数据 public ...
- first root
题目给出一棵二叉树的中序和后序排列.求出它的先序排列[提示]通过对比二叉树的中序和后序排列,我们可以找出根节点及左右子树.同样的,也可以通过对比左子树的中序和后序排列,找出左子树的根节点…….可见,该 ...
- openstack通过salt-cloud创建虚拟机
saltstack有三大功能:远程执行.配置管理.云管理:saltstack的云管理就是通过salt-cloud完成的,salt-cloud是基于openstack来做的:salt-cloud能够管理 ...
- 【原创】有关Silverlight中“DataGrid中级联动态绑定父/子ComboBox ”的示例。
尝试了很多种方案,由于Datagrid动态生成的每行父子comboBox的Name的不确定性,给父ComboBox绑定事件中获取 子ComboBox很难根据Name获取到. 花了不少时间和公司同事商讨 ...