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等等都是上面的情况。

  • 相关阅读:
    MySQL max_allowed_packet设置及问题
    centos 7 编译安装mysql 详细过程
    如何快速查看mysql数据文件存放路径?
    centos yum 库更新
    centos 7 ifconfig 命令找不到
    http协议
    前端那些事儿
    C++接口的定义与实现的详细过程
    List转为字符串
    spring cloud spring boot JPA 克隆对象修改属性后 无法正常的执行save方法进行保存或者更新
  • 原文地址:https://www.cnblogs.com/yxkNotes/p/13967535.html
Copyright © 2011-2022 走看看