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

  • 相关阅读:
    文件上传漏洞之js验证
    文件上传漏洞靶机upload-labs(1到10)
    URI/URL/URN都是什么
    解压jdk报错gzip: stdin: not in gzip format
    burpsuite常见问题
    C/C++字符串反转的N种方法
    转 二叉树之Java实现二叉树基本操作
    MySQL 面试基础
    转 MySQL中的行级锁,表级锁,页级锁
    MySQL问题排查工具介绍
  • 原文地址:https://www.cnblogs.com/yxkNotes/p/13967535.html
Copyright © 2011-2022 走看看