一、clientHeight與offsetHeight的區(qū)別：
- element.clientHeight : 在頁面上返回內(nèi)容的可視高度（不包括邊框慧邮，邊距或滾動條）
- element.offsetHeight：返回，任何一個元素的高度包括邊框和填充及滾動條
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
#div1{
padding:10px;
height:100px;
border:2px solid black;
background-color: red;
box-sizing: border-box;
/*box-sizing:content-box*/
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="div1">
</div>
<script type="text/javascript">
var dom=document.getElementById("div1");
console.log("clientHeight",dom.clientHeight);
console.log("offsetHeight",dom.offsetHeight);
</script>
</body>
</html>
上面例子的輸出結(jié)果為： clientHeight 96 非驮， offsetHeight 100 疏咐。
我們在css上做一些小修改，將box-sizing改為content-box旬陡。此時結(jié)果會發(fā)生變化，變化的根本原因在于css盒子模型语婴。當(dāng)box-sizing為content-box時描孟，即w3c標準，元素的內(nèi)容區(qū)域不包含padding值砰左。所以 此時css中定義的height+padding值會等于 clientHeight（120）匿醒，height+padding+border等于offsetHeight（124） 。
二缠导、clientHeight和scrollHeight的區(qū)別
值得注意的是scrollHeight 沒有包含滾動工具條的高度廉羔，但scrollHeight是計算整個div中內(nèi)容的高度(即滾動條拖動后顯示的內(nèi)容)，而clientHeight只是記錄可視高度僻造。
下面是demo,可copy運行
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
#div1{
padding:10px;
height:100px;
border:2px solid black;
background-color: red;
/* box-sizing:content-box;*/
box-sizing: border-box;
overflow: scroll;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="div1">
<p>1111</p>
</div>
<script type="text/javascript">
var dom=document.getElementById("div1");
console.log("clientHeight",dom.clientHeight);
console.log("offsetHeight",dom.offsetHeight);
console.log("offsetLeft",dom.offsetLeft);
console.log("offsetParent",dom.offsetParent);
console.log("offsetTop",dom.offsetTop);
console.log("scrollHeight",dom.scrollHeight);
console.log("scrollLeft",dom.scrollLeft);
console.log("scrollTop",dom.scrollTop);
console.log("scrollWidth",dom.scrollWidth);
</script>
</body>
</html>
