document.documentElement和document.body的区别
网页中获取滚动条卷去部分的高度，可以通过 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的区别
转自:http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html 网页中获取滚动条卷去部分的高度,可以通过 document.body ...
- 不同浏览器对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对象里的 ...
随机推荐
- 分享一个JavaScript嗅探工具Tracker
今天发现一个好用的JS侦测工具,实时监测JS代码的使用效率,运行状态等. 期待插件作者添加更好的功能. 运行效果 运行效果如下(我把它放到标签里了): 1.点击Tracker书签工具 2.选择查看选项 ...
- VS2010版快捷键
VS2010版快捷键 Ctrl+E,D ----格式化全部代码 Ctrl+E,F ----格式化选中的代码 CTRL + SHIFT + B生成解决方案 CTRL + F7 生成编译 CTRL + O ...
- C# 使用XML序列化对象（二）
在C# 使用XML序列化对象(一)中描述了使用XML序列化对象的最简单的实现. 现在我们来看看稍微复杂一点的情况: 现有两个类:A和B,B是A的派生类,如下所示: public class A { p ...
- Moqui学习之数据与资源
资源位置: 资源门面位置的字符串类似于URL的构成方式:协议,主机,可选端口和文件名.它支持标准的java URL协议(http https ftp jar file).同样也支持一些扩展的协议: c ...
- Ajax 的缺点
1.ajax干掉了back按钮,即对浏览器后退机制的破坏.后退按钮是一个标准的web站点的重要功能,但是它没法和js进行很好的合作.这是ajax所带来的一个比较严重的问题,因为用户往往是希望能够通过后 ...
- Spring 使用中的设计模式
1. 简单工厂 又叫做静态工厂方法(StaticFactory Method)模式,但不属于23种GOF设计模式之一. 简单工厂模式的实质是由一个工厂类根据传入的参数,动态决定应该创建哪一个产品类. ...
- Android Launcher分析和修改9——Launcher启动APP流程
本来想分析AppsCustomizePagedView类,不过今天突然接到一个临时任务.客户反馈说机器界面的图标很难点击启动程序,经常点击了没有反应,Boss说要优先解决这问题.没办法,只能看看是怎么 ...
- 【CodeForces 620D】Professor GukiZ and Two Arrays
题 题意 两个数列,一个有n个数,另一个有m个数,让你最多交换两次两个数列的数,使得两个数列和的差的绝对值最小,求这个差的绝对值.最少交换次数.交换数对 分析 交换0次.1次可得到的最小的差可以枚举出 ...
- RHCS配置web高可用集群
基本条件三台主机 10.37.129.5 web1.xzdz.hk web1 10.37.129.6 web2.xzdz.hk web2 10.37.129.4 luci.xzdz.hk luci 其 ...
- 从svn服务器自动同步到另一台服务器
需求场景 A commit B post-commit C (workstation) --------------> (svn server) ---------------------> ...