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. ...
随机推荐
- centos6.3升级python至2.7.5
centos6.3自带的python版本是2.6.6,有时候需要升级到2.7.这里记录一下升级过程,方便查阅.实际上是转载自http://flyingdutchman.iteye.com/blog/1 ...
- vue 计算属性与侦听器
侦听器:顾名思义,就是用来监听数据变化用的.侦听器在vue实例中,定义变量watch来使用.监听新值newVal和旧值oldVal,具体使用方法如下: <!DOCTYPE html> &l ...
- Codeforces Round #422 (Div. 2) B. Crossword solving 枚举
B. Crossword solving Erelong Leha was bored by calculating of the greatest common divisor of two ...
- ECMAScript学习笔记
1. ECMAScript不存在块级作用域,因此在循环内部定义的变量,在循环外也是可以访问的 eg: var count =10; fpr(var i=0; i<count; i++){ ale ...
- 设置Android Studio工程布局文件的默认布局
每次创建新的工程后,布局文件的的布局总是ConstraintLayout,如何更改? 进入Android Studio安装目录,用文本编辑器打开文件plugins\android\lib\templa ...
- maven依赖排除
单依赖过滤 同依赖过滤直接处理:可以过滤一个或者多个,如果过滤多个要写多个<exclusion>. <dependency> <groupId>org.apache ...
- JS/TS 的 import 和 export 用法小结
ES6 export 和 export default的区别 昨天帮一个网友解决一个typescript的问题,看了一下,归根结底还是对js的import和export用法的不熟悉.让我想起来当年学这 ...
- ⭐驱动之module_init/module_exit与系统启动关系
在前面helloworld的编写里面,我们使用了两个宏分别是module_init和module_exit,这里分析下为什么使用这两个宏. 在写模块的时候有两个特殊的函数,分别是init_module ...
- dedecms获取顶级栏目名称、二级栏目名称实现方法
织梦DEDECMS文章.栏目页获取当前页面顶级栏目名称的方法 在用织梦做一些项目时,时常会碰到需要在当前页面调用顶级栏目名称的时候,织梦默认{dede:field name='typename' /} ...
- vue2实现自定义样式radio单选框
先上效果 <div class="reply"> 主编已回复: <div class="radio-box" v-for="(ite ...