zoukankan      html  css  js  c++  java
  • 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等等都是上面的情况。

  • 相关阅读:
    健康检查详解:机制、配置、对比、实操
    制作自签名证书
    常用的UML建模
    UML建模更好的表达产品逻辑
    常用的UML建模
    UML建模图实战笔记
    领域驱动设计学习之路—DDD的原则与实践
    DDD领域驱动设计理论篇
    WAN、LAN、WLAN三种网口的区别
    新生代Eden与两个Survivor区的解释
  • 原文地址:https://www.cnblogs.com/yxkNotes/p/13967535.html
Copyright © 2011-2022 走看看