document.body 与 document.documentElement区别介绍
什么是document.body？
返回html dom中的body节点 即<body>
什么是 document.documentElement？
返回html dom中的root 节点 即<html>
document.documentElement 与 document.body的应用场景
获取 scrollTop 方面的差异
在chrome(版本 52.0.2743.116 m)下获取scrollTop只能通过document.body.scrollTop,而且DTD是否存在,不会影响 document.body.scrollTop的获取。 通过console查看结果： demo 1 with doctype : http://jsbin.com/cisacam demo 2 without doctype: http://jsbin.com/kamexad/16
在firefox(47.0)及 IE(11.3)下获取scrollTop，DTD是否存,会影响document.body.scrollTop 与 document.documentElement.scrollTop的取值
在firefox(47.0) 页面存在DTD，使用document.documentElement.scrollTop获取滚动条距离；
页面不存在，使用document.body.scrollTop 获取滚动条距离 demo 1 with doctype : http://jsbin.com/cisacam demo 2 without doctype: http://jsbin.com/kamexad/16
IE(11.3)
页面存在DTD，使用document.documentEelement.scrollTop获取滚动条距离 页面不存在DTD,使用document.documentElement.scrollTop 或 document.body.scrollTop都可以获取到滚动条距离 demo 1 with doctype : http://jsbin.com/cisacam demo 2 without doctype: http://jsbin.com/kamexad/16
兼容解决方案：
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
document.body 与 document.documentElement区别介绍的更多相关文章
- document.documentElement和document.body区别介绍
document.documentElement和document.body区别介绍 * 区别 body是DOM对象黎明的body子节点,即标签 docummentElement 是整个树的根节点ro ...
- document.body、document.documentElement和window获取视窗大小的区别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...
- document.body 和 document.documentElement 的区别
document.body 和 document.documentElement 的区别 : www.cnblogs.com/scy251147/archive/2011/04/10/2011420. ...
- document.body和document.documentElement区别
1.document.documentElement表示文档节点树的根节点,即<html> document.body是body节点 2. 页面具有 DTD,或者说指定了 DOCTYPE ...
- document.body、document.documentElement和window获取视窗大小的差别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗体大小的三种方法(浏览器的视口,不包含工具栏和滚动栏). 对于In ...
- document.getElementById和document.querySelector的区别
zepto中的$(".111")出错,jQuery中$(".111")不出错的原因: zepto用document.querySelector实现,jQuery ...
- document.ready和onload的区别
转自:http://holysonll.blog.163.com/blog/static/2141390932013411112823855/ document.ready和onload的区别——Ja ...
- JS 页面加载触发事件 document.ready和onload的区别（转）
原博地址:http://blog.163.com/zhaoyanping_1125/blog/static/20132915320111129113723710/ * document.ready和o ...
- js中的 window.location、document.location、document.URL 对像的区别（转载）
原文:http://www.cr173.com/html/18417_1.html 当我们需要对html网页进行转向的时候或是读取当前网页的时候可以用到下面三个对像: window.location. ...
随机推荐
- 线程相关函数(POSIX线程)：
创建单个线程 #include <pthread.h> // 若成功返回0,出错返回正的Exxx值 int pthread_create(pthread_t *tid, // 每个线程在进 ...
- Hihocoder #1527 : 快速乘法 DP
时间限制:20000ms 单点时限:1000ms 内存限制:256MB 描述 在写代码时,我们经常要用到类似 x × a 这样的语句( a 是常数).众所周知,计算机进行乘法运算是非常慢的,所以我们需 ...
- JSON和JavaScript对象
var obj={width:100,height:200},这样的并不叫JSON,并且JSON只是一种数据格式,并不是具体的实例. 但很多人把这样的JS对象当成JSON,下面把这个问题讲清楚 一.J ...
- jquery 选择器(selector)和事件(events)
页面加载完成后开始运行do stuff when DOM is ready 中的语句! $(document).ready(function() { // do stuff when DO ...
- 处理TCP连包的一小段代码
学习网络编程也有一段时间了,一直听说TCP数据会连包,但一直不知道怎么测试好.最近测试了下:发送方使用对列,将发送的数据存入队列,然后开线程,专门发送.发送多包数据之间不延时.在接收方,他们确实连在一 ...
- Android系统开发入门
Android操作系统 Android是一个基于Linux.使用java作为程序接口的操作系统. 他提供了一些工具,比如编译器.调试器.还有他自己的仿真器(DVM — Dalvik Virtual M ...
- iOS自定义提示弹出框（类似UIAlertView）
菜鸟一枚,大神勿喷.自己在牛刀小试的时候,发现系统的UIAlertView有点不喜欢,然后就自己自定义了一个UIAlertView,基本上实现了系统的UIAlertView,可以根据项目的需求修改UI ...
- hdu 4268 Alice and Bob（贪心+multiset）
题意:卡牌覆盖,每张卡牌有高(height)和宽(width).求alice的卡牌最多可以覆盖多少bob的卡牌 思路:贪心方法就是找h可以覆盖的条件下找w最大的去覆盖. #include<ios ...
- hdu-2680 Choose the best route(最短路)
题目链接: Choose the best route Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ( ...
- Spring中的扩展点
Spring作为一个常用的IOC框架,在设计上预留了很多的扩展点,很多第三方开源框架,包括Spring自身也是基于这些扩展点实现的,这很好的体现了对修改关闭.对扩展开放的原则.总的来说Spring的扩 ...