height、clientHeight、offsetHeight、scrollHeight简解

注意默认情况下谷歌浏览器滚动条的区别：

• MAC：滚动条浮起，不占据页面位置，理解为0px；
• window：滚动条是16px（印象中）

dom元素代码

<div
      id="div"
      style="
        height: 200px;
        width: 200px;
        border: solid 50px red;
        overflow: auto;
        padding: 50px;
        margin: 50px;
      "
    >
      <div
        id="info"
        style="height: 400px; width: 400px; border: solid 1px blue"
      ></div>
    </div>

js代码实现

      var div = document.getElementById("div");
      var hsh = div.style.height; // 元素高度200px
      var hc = div.clientHeight; //可视内容高度为300px
      var ho = div.offsetHeight; //占据页面总高度为400px
      var hs = div.scrollHeight; // 滚动页面高度 502px
      console.log(hsh, hc, ho, hs);

jq代码实现

      var div = $("#div");
      var hsh = div.height(); // 元素高度200px
      var hc = div.innerHeight(); //可视内容高度为300px
      var ho = div.outerHeight(); //占据页面总高度为400px
      var hs = div[0].scrollHeight; // 滚动页面高度 502px
      console.log(hsh, hc, ho, hs);

视图

image.png

image.png

运行结果

image.png

解析：
height: 200px;
clientHeight = height + padding-top + padding-bottom;
offsetHeight = clientHeight + border-top + border-bottom;
scrollHeight = 子元素的offsetHeight + padding-top + padding-bottom;
宽度同理