zoukankan      html  css  js  c++  java
  • 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;
  • 相关阅读:
    css兼容性大坑
    JS获取元素CSS值
    calendar的一些操作
    java日期工具类
    redis的一些操作
    webstorm ES6 转 ES5
    基于时间的动画算法
    3434
    MySQL登陆知识
    MySQL密码知识点
  • 原文地址:https://www.cnblogs.com/agansj/p/7874842.html
Copyright © 2011-2022 走看看