各种高度

JS与jQuery对应的高度问题:

<div id="box"></div>

#box{
    width:100px;
    height:100px;
    border:10px solid red;
    padding:20px;
    margin:50px;
    box-size:border-box/content-box;//新版和旧版盒模型
}

由盒模型可见：

border-box盒模型

border-box:内容的实际高度 = height - border2 - padding2 =40px;

content-box盒模型

content-box:内容的实际高度 = height = 100px;

offsetHeight

offsetHeight是内容的实际高度 + 2*padding + 2*border;
document.querySelector('#box').offsetHeight的两种情况：

    在border-box时：40+20+40 = 100px;
    在content-box时：100+20+40 = 160px;

height()

$("#box").height()是内容的实际高度
$("#box").height()

    在border-box时：40px;
    在content-box时：100px;

clientHeight

clientHeight是内容的实际高度 + 2*padding;
document.querySelector('#box').clientHeight

    在border-box时：40+40 = 80px;
    在content-box时：100+40 = 140px;

scrollTop

scrollTop是元素滚动的高度
document.querySelector('#box').scrollTop就是正常box元素滚动的距离

scrollTop()

scrollTop()同样是jQuery中元素的滚动高度，与js中的scrollTop等价

$("#box").scrollTop() <=> document.querySelector('#box').scrollTop
都是box盒子滚动的距离