• document.documentElement和document.body的区别


    1.两种特殊的文档属性可用来访问根节点

        document.documentElement

        document.body

        第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。

        第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问。

    2.DTD已声明 

        1.IE
          document.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度
          document.documentElement.scrollTop  浏览器滚动部分高度,document.body.scrollTop 始终为0
          document.documentElement.clientHeight  浏览器可视部分高度,document.body.clientHeight  浏览器所有内容高度

        2.FF

          document.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度
          document.documentElement.scrollTop  浏览器滚动部分高度,document.body.scrollTop 始终为0
          document.documentElement.clientHeight 浏览器可视部分高度,document.body.clientHeight  浏览器所有内容高度

        3.chrome

          document.documentElement.scrollHeight  浏览器所有内容高度, document.body.scrollHeight  浏览器所有内容高度
          document.documentElement.scrollTop 始终为0,document.body.scrollTop  浏览器滚动部分高度
          document.documentElement.clientHeight  浏览器可视部分高度,document.body.clientHeight  浏览器所有内容高度

    3.DTD未声明 

        1.IE
          document.documentElement.scrollHeight  浏览器可视部分高度,document.body.scrollHeight  浏览器所有内容高度 
          document.documentElement.scrollTop 始终为0,document.body.scrollTop  浏览器滚动部分高度
          document.documentElement.clientHeight 始终为0,document.body.clientHeight  浏览器可视部分高度

        2.FF

          document.documentElement.scrollHeight  浏览器可视部分高度, document.body.scrollHeight 浏览器所有内容高度
          document.documentElement.scrollTop 始终为0,document.body.scrollTop 浏览器滚动部分高度
          document.documentElement.clientHeight 浏览器所有内容高度,document.body.clientHeight 浏览器可视部分高度

        3.chrome

          document.documentElement.scrollHeight 浏览器可视部分高度,document.body.scrollHeight 浏览器所有内容高度
          document.documentElement.scrollTop 始终为0,document.body.scrollTop 浏览器滚动部分高度
          document.documentElement.clientHeight 浏览器所有内容高度,document.body.clientHeight 浏览器可视部分高度

    4.概念

        1.浏览器所有内容高度即浏览器整个框架的高度,包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和

        2.浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度

        3.document.documentElement.scrollTop和document.body.scrollTop始终有一个为0,所以可以用这两个的和来求scrollTop

        4.scrollHeight、clientHeight 在DTD已声明的情况下用documentElement,未声明的情况下用body

    5.document.compatMode 可以用来判断是否声明了DTD

        BackCompat:标准兼容模式关闭。  浏览器客户区宽度是document.body.clientWidth;

        CSS1Compat:标准兼容模式开启。 浏览器客户区宽度是document.documentElement.clientWidth。

        浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。

  • 相关阅读:
    包建强的培训课程(6):Android App瘦身优化
    包建强的培训课程(14):Android与ReactNative
    包建强的培训课程(13):iOS与ReactNative
    包建强的培训课程(12):iOS深入学习(内存管理、Block和GCD等)
    包建强的培训课程(11):iOS Runtime实战
    Neo4j 第九篇:查询数据(Match)
    Neo4j 第八篇:投射和过滤
    Neo4j 第七篇:模式(Pattern)
    Neo4j 第六篇:Cypher语法
    Python 学习 第14篇:数据类型(元组和集合)
  • 原文地址:https://www.cnblogs.com/yxkNotes/p/13967535.html
Copyright © 2020-2023  润新知