JavaScript中documentElement和body的区别及jQuery中实现兼容的原理
2017-10-16 11:20
731 查看
在浏览器里documentElement是一个只读属性,返回的是document节点下的子节点,一般是html。而document.body返回的是body。这两个东西在用到获取浏览器的scrollTop等应用时会发现一些不同,下面代码放到有滚动条的页面运行,当你滚动滚动条的时候,看看火狐、谷歌和ie浏览器到底得出什么样的结果。如:
于是在jQuery的源码中,为了实现兼容各个浏览器,于是就采用取最大值的方法,如:
而我们在用原生js时,可以采用jquery源码,也可以这样做:
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
console.log(document.documentElement.scrollTop) console.log(document.body.scrollTop)可以发现在ie和火狐浏览器里,第一段代码有输出结果而第二段代码总是输出0,而在谷歌浏览器中的情况正好相反。这是由于浏览器本身的兼容效果决定的。如果一个html文件没有DTD开头的话,那么在谷歌浏览器则没有影响,在火狐浏览器中,则只能通过document.body来获取scrollTop的值。而在ie浏览器中,没有了DTD上面的这两个方法都可以用。
于是在jQuery的源码中,为了实现兼容各个浏览器,于是就采用取最大值的方法,如:
elem = document; doc = elem.documentElement; // Either scroll[Width/Height] or offset[Width/Height] or client[Width/Height], whichever is greatest // unfortunately, this causes bug #3838 in IE6/8 only, but there is currently no good, small way to fix it. return Math.max(elem.body["scroll" + name], doc["scroll" + name], elem.body["offset" + name], doc["offset" + name], doc["client" + name]);
而我们在用原生js时,可以采用jquery源码,也可以这样做:
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
相关文章推荐
- jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别
- javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别
- javascript document.documentElement和document.body的区别
- javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别
- jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别
- javascript的window.onload与jquery的$(document).ready()的区别
- document.documentElement和document.body的区别(转)
- jquery中的 $("#jb51")与document.getElementById("jb51") 的区别
- document.body.clientHeight 和 document.documentElement.clientHeight 的区别
- document.body 和 document.documentElement 的区别
- 【转】document.getElementById与getElementsByName的区别(JavaScript)
- jquery 中的 $("#air") 与 document.getElementById("air") 的区别
- document.body.scrollTop 与 document.documentElement.scrollTop 的区别和使用
- jquery $() 和document.getElementById() 区别
- document.body.clientHeight 和 document.documentElement.clientHeight 的区别
- document.body.scrollTop与document.documentElement.scrollTop兼容
- document.body 和 document.documentElement 的区别
- jQuery与YUI中鼠标位置检测比较学习(document.documentElement document.body与pageX pageY以及clientX clientY)
- 用javascript实现jquery的document.ready功能的实现代码
- 解决 jQuery 实现父窗口的问题 如window.parent.document.getElementById().innerHTML