注意默認(rèn)情況下谷歌瀏覽器滾動(dòng)條的區(qū)別：
-
MAC：滾動(dòng)條浮起畔咧，不占據(jù)頁(yè)面位置茎芭，理解為0px； -
window：滾動(dòng)條是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代碼實(shí)現(xiàn)
var div = document.getElementById("div");
var hsh = div.style.height; // 元素高度200px
var hc = div.clientHeight; //可視內(nèi)容高度為300px
var ho = div.offsetHeight; //占據(jù)頁(yè)面總高度為400px
var hs = div.scrollHeight; // 滾動(dòng)頁(yè)面高度 502px
console.log(hsh, hc, ho, hs);
jq代碼實(shí)現(xiàn)
var div = $("#div");
var hsh = div.height(); // 元素高度200px
var hc = div.innerHeight(); //可視內(nèi)容高度為300px
var ho = div.outerHeight(); //占據(jù)頁(yè)面總高度為400px
var hs = div[0].scrollHeight; // 滾動(dòng)頁(yè)面高度 502px
console.log(hsh, hc, ho, hs);
視圖
image.png
image.png
運(yùn)行結(jié)果
image.png
解析：
height: 200px;
clientHeight = height + padding-top + padding-bottom;
offsetHeight = clientHeight + border-top + border-bottom;
scrollHeight = 子元素的offsetHeight + padding-top + padding-bottom;
寬度同理
