測試用例：
<!DOCTYPE html> <html lang="en"> <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> *{ margin: 0; padding: 0 } html{ background: #00ffee; height: 600px; } body{ border: 5px solid #ff0; margin:5px; padding: 5px; height: 800px; } #root { border: 5px solid red; width: 100px; height: 200px; overflow: auto; margin: 5px; padding: 5px; } #child { height: 300px; width: 200px; border: 5px solid blue; margin: 5px; padding: 5px; overflow: auto; } #hehe { height:200px; width: 300px; border: 5px solid purple; padding: 5px; margin: 5px; } </style> </head> <body> <div style="height: 100px"></div> <div id="root"> <div id="child"> <div id="hehe"></div> </div> </div> <script> document.onclick = function() { consolelog(); } function consolelog () { let html = document.documentElement console.log("html.clientHeight=",html.clientHeight) console.log("html.clientWidth=",html.clientWidth) console.log("html.offsetHeight=",html.offsetHeight) console.log("html.offsetWidth=",html.offsetWidth) console.log("html.scrollHeight=",html.scrollHeight) console.log("html.scrollWidth=",html.scrollWidth) console.log('================================') let body = document.body; console.log("body.clientHeight=",body.clientHeight) console.log("body.clientWidth=",body.clientWidth) console.log("body.offsetHeight=",body.offsetHeight) console.log("body.offsetWidth=",body.offsetWidth) console.log("body.offsetTop=",body.offsetTop) console.log("body.offsetLeft=",body.offsetLeft) console.log("body.offsetParent=",body.offsetParent) console.log("body.scrollHeight=",body.scrollHeight) console.log("body.scrollWidth=",body.scrollWidth) console.log("body.scrollTop=",body.scrollTop) console.log("body.scrollLeft=",body.scrollLeft) console.log('================='); let root = document.getElementById("root"); console.log("root.clientHeight=",root.clientHeight) console.log("root.clientWidth=",root.clientWidth) console.log("root.offsetHeight=",root.offsetHeight) console.log("root.offsetWidth=",root.offsetWidth) console.log("root.offsetTop=",root.offsetTop) console.log("root.offsetLeft=",root.offsetLeft) console.log("root.offsetParent=",root.offsetParent) console.log("root.scrollHeight=",root.scrollHeight) console.log("root.scrollWidth=",root.scrollWidth) console.log("root.scrollTop=",root.scrollTop) console.log("root.scrollLeft=",root.scrollLeft) // console.log('=================================\n'); let child = document.getElementById("child"); console.log("child.clientHeight=",child.clientHeight) console.log("child.clientWidth=",child.clientWidth) console.log("child.offsetHeight=",child.offsetHeight) console.log("child.offsetWidth=",child.offsetWidth) console.log("child.offsetTop=",child.offsetTop) console.log("child.offsetLeft=",child.offsetLeft) console.log("child.offsetParent=",child.offsetParent) console.log("child.scrollHeight=",child.scrollHeight) console.log("child.scrollWidth=",child.scrollWidth) console.log("child.scrollTop=",child.scrollTop) console.log("child.scrollLeft=",child.scrollLeft) } </script> </body> </html>
height: 樣式中指定的高度,是content的高度，不含paddding及其他。
clientHeight: 包含padding的高度；
clientHeight = height + padding*2(根據設置的具體情況計算)
offsetHeight: 包含border的高度；
offsetHeight =clientHeight+borderWidth*2
但是：
上面的計算方法，不適用於html元素。其他都適用。 const html = document.documentElement; const body = document.body; /****html.offsetHeight*****/ 1. 在不設置html高度的情況下; 增加的參數視具體情況不同 html.offsetHeight = body.offsetHeight+ margin*2 2. 如果設置html的高度為height; html.offsetHeight = height; /*****html.clientHeight*********/ clientHeight是瀏覽器可展示區域高度（去除菜單導航等）,永遠不變
scrollHeight:
1) 當前容器沒有滾動條時，scrollHeight = clientHeight
2) 當前容器的內容超過容器的高度，出現滾動條時
scrollHeight = 當前容器的padding + child容器(滾動內容)的總高度（offsetHeight+margin）
scrollTop:
滾動后隱藏的內容的高度。
offsetTop:
當前容器上邊界距離瀏覽器頂部的距離。