document.documentElement.clientHeight与document.body.clientHeight的区别

网页可见区域高:document.body.clientHeight
网页正文全文高:document.body.scrollHeight
  • clientHeight: 表示可视区域高度, 包括padding但不包括border、水平滚动条、margin的元素的高度

  • offsetHeight:表示可视区域高度,包括padding、border、水平滚动条,但不包括margin的元素的高度

  • scrollHeight: 当元素的子元素高度大于父元素,父元素出现滚动条,此时父元素的clientHeight表示可视的高度,父元素的scrollHeight 表示页面的高度,包括溢出页面被挡住的部分,即其实就是子元素的高度。在没有滚动条时scrollHeightclientHeight相等恒成立。单位px,只读元素 。

  • document.documentElement表示文档的根元素,即html元素

  • document.body 表示文档中body元素

    正文
    • 在一个空白html页面中如下面代码片段

      
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Titletitle>
         <style>
             * {
                 margin: 0;
                 padding: 0;
             	  }
          style>
      head>
      <body>
      
      body>
      html>
      
      • 此时没有任何css设置,通过浏览器观察,html元素与body元素的高度都是0,但是此时document.documentElement.clientHeight 显示为页面可见区域也就是整个视口的高度,document.body.clientHeight显示为0

      • 如果加上css,body{height: 100%;} 此时 结果与上一条一样

      • 如果加上css html, body { height: 100% } 此时 document.documentElement.clientHeightdocument.body.clientHeight的值一样,都是页面可见区域也就是整个视口的高度。

        综上所述,通常可通过document.documentElement.clientHeight来获取视口的高度。但是一般情况下,都会设置html, body { height: 100% },所以一般情况下,这两个值是一样的,都是视口高度。

      • 同样当body高度高于视口高度,导致html元素内出现滚动条,此时document.documentElement.clientHeight是屏幕可视区域高度,document.documentElement.scrollHeight 的高度包含溢出的部分,即等于body的高度

下面的案例理解


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html {
      height: 100%;
    }
    body {
      height: 100%;
    }
    .wrap {
      height: 100%;
      width: 90%;
      background-color: #9a6e3a;
      overflow: auto;
    }
    .box {
      height: 2000px;
      width: 50%;
      background-color: red;
    }
  style>
head>
<body>
<div class="wrap">
  <div class="box">div>
div>
body>
<script>
  window.onload = function () {
    let $box = document.querySelector('.box')
    let $wrap = document.querySelector('.wrap')
    console.log(document.documentElement.clientHeight)  //屏幕可视区域高度
    console.log(document.body.clientHeight)  //屏幕可视区域高度
    console.log($wrap.clientHeight)  //屏幕可视区域高度
      //子元素高于父元素,内部有滚动条,此时高度包含子元素溢出的部分,即等于子元素高度
    console.log($wrap.scrollHeight)  
    console.log($box.clientHeight)  //子元素内部没有滚动条 等于子元素实际高度
    console.log($box.offsetHeight)  //子元素内部没有滚动条 等于子元素实际高度
  }
script>
html>

你可能感兴趣的:(html,css)