height/width、offsetheight/offsetwidth、clientheight/clientwidth和scrollheight/scrollwidth的区别

<div id="box" style="width: 100px; height: 100px; padding: 10px;border: 2px solid red; margin: 10px"></div>

$("#box").height(); // 100 是JQuery方法
document.getElementById("box").offsetHeight; // 124 可见区域的高
document.getElementById("box").clientHeight; //120 可见区域的高，不包括边框
document.getElementById("box").scrollHeight; // 120 正文的宽，若没有出现滚动条则与clientHeight 相等
document.getElementById("box").scrollTop; // 出现滚动条， 滚动条之上的高度
document.getElementById("box").style.height; // 100px 会返回px ，若未设置height则会返回空值

$("#box").width(); // 100 是JQuery方法
document.getElementById("box").offsetWidth; // 124 可见区域的宽
document.getElementById("box").clientWidth; // 120 可见区域的宽，不包括边框
document.getElementById("box").scrollWidth; // 120 正文的高，若没有出现滚动条则与clientWidth 相等
document.getElementById("box").style.width; // 100px 会返回px ，若未设置width则会返回空值