元素的尺寸 - Githubissues

概述

元素的尺寸分为三类：元素的css尺寸、内容可视（viewport）尺寸、内容真实尺寸。元素的尺寸的获取：offsetHeight、clientHeight、scrollHeight。

offsetHeight = cssHeight+padding*2+border*2;
clientHeight = contentViewHeight + padding*2;
scrollHeight = 填充高度+paddingTop（没有scroll的情况下）;
scrollHeight = 填充高度+padding*2(有scroll的情况下)

实例

实例一：具有padding，没有滚动条的场景

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>offsetHeight-clientHeight-scrollHeight-有padding没有滚动条</title>
</head>
<body>
    <div id="test" class="dropzone demo1">
        <div id="inner" class="inner">
            我是填充的内容<br />
            我是填充的内容<br />
            我是填充的内容<br />
            我是填充的内容<br />
            我是填充的内容<br />
            我是填充的内容<br />
            我是填充的内容<br />
        </div>
    </div>
<style>
  .dropzone {
    position: absolute;
    left: 20px;
    top: 200px;
    width: 200px;
    height: 200px;
    background: blueviolet;
    text-align: center;
    word-break: normal;
    white-space: normal;
    border: 2px solid mediumvioletred;
  }
  .inner{
      height: 800px;
      border: 2px solid red;
  }
  .demo1{
      padding: 10px;
      overflow: hidden;
  }
</style>

<script>
    function $(id){
        return document.getElementById(id)
    }
    function log(offsetHeight,clientHeight,scrollHeight){
        console.log('demo1,没有滚动条offsetHeight:'+offsetHeight+', clientHeight:'+clientHeight+', scrollHeight:'+scrollHeight);
    }
    window.onload = function(){
        var $elm = $('test');
        // demo1 没有滚动条的情况下
        var offsetHeight = $elm.offsetHeight;
        // cssHeight(200)+padding(10)*2+border(2)*2 = 224px;
        var clientHeight = $elm.clientHeight;
        // contentViewPortHeight（200）+padding(10)*2 = 220px;
        var scrollHeight = $elm.scrollHeight;
        // fillingHeight（800+2*2）+ paddingTop(10) = 814px;
        log(offsetHeight,clientHeight,scrollHeight);
    }
</script>
</body>
</html>

实例二，具有padding，具有滚动条的场景

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>offsetHeight-clientHeight-scrollHeight-有padding有滚动条</title>
</head>
<body>
    <div id="test" class="dropzone demo2">
        <div id="inner" class="inner">
            我是填充的内容<br />
            我是填充的内容<br />
            我是填充的内容<br />
            我是填充的内容<br />
            我是填充的内容<br />
            我是填充的内容<br />
            我是填充的内容<br />
        </div>
    </div>
<style>
  .dropzone {
    position: absolute;
    left: 20px;
    top: 200px;
    width: 200px;
    height: 200px;
    background: blueviolet;
    text-align: center;
    word-break: normal;
    white-space: normal;
    border: 2px solid mediumvioletred;
  }
  .inner{
      height: 800px;
      border: 2px solid red;
  }
  .demo2{
      padding:10px;
      overflow: scroll;
  }
</style>

<script>
    function $(id){
        return document.getElementById(id)
    }
    function log(offsetHeight,clientHeight,scrollHeight){
        console.log('demo1,没有滚动条offsetHeight:'+offsetHeight+', clientHeight:'+clientHeight+', scrollHeight:'+scrollHeight);
    }
    window.onload = function(){
        // demo2 有滚动条的情况下
        var offsetHeight = $elm.offsetHeight;
        // cssHeight(200)+padding(10)*2+border(2)*2 = 224px;
        var clientHeight = $elm.clientHeight;
        // contentViewPortHeight（183）+padding(10)*2 = 203px;
        var scrollHeight = $elm.scrollHeight;
        // fillingHeight（800+2*2）+ paddingTop(10)*2 = 824px;
        log(offsetHeight,clientHeight,scrollHeight);
    }
</script>
</body>
</html>

hytzgroup / blog

元素的尺寸 #4

概述

实例