clientHeight、scrollHeight、offsetHeight、innerHeigh、outerHeight、clientTop、scrollTop、offsetTop、offsetParent、scrollIntoView

Posted on 2018-06-13 Edited on 2023-11-24 In DOM , BOM Views: Disqus:

本來想特別去比較 clientHeight、scrollHeight、offsetHeight 三者有何不同，

但越去深入了解後，越發現變動因素太大，光是一種 clientHeight，

在不同的瀏覽器、對 html tag 取值(document.documentElement.clientHeight)、

對 body tag 取值(document.body.clientHeight)、

對一般元素取值時，都可能會產生不一樣的結果。

此篇文章是在 chrome 底下，對一般元素取值，所測試歸納的結果。

此文章用字精簡，而且還不保證用字表達一定正確無誤、歸納也僅供參考。

感謝小殘的程式光廊的圖解系列文章，特別是小殘的程式光廊所畫的這張圖

讓我對 clientHeight、scrollHeight、offsetHeight 有了些想法。

一、範例

<!DOCTYPE html>
<html id="h">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        body {
            margin: 10px;
            border: 10px yellow solid;
            padding: 10px;
        }
        div {
            margin: 10px;
            border: 10px red solid;
            padding: 10px;
        }
        p {
            margin: 10px;
            border: 10px blue solid;
            padding: 10px;
            height: 300px;
            width: 300px;
        }
        #dh {
            height: 200px;
            overflow: hidden;
        }
    </style>
</head>
<body id="b">
    <div id="d1">
        <p id="p1">width:300px; height:300px; margin:10px; border:10px;</p>
    </div>
    <div id="dh">
        <p id="ph">width:300px; height:300px; margin:10px; border:10px;</p>
    </div>
</body>
</html>

試了以下指令後，三者差別歸納如下

document.getElementById("p1").clientHeight;

document.getElementById("p1").scrollHeight;
document.getElementById("p1").offsetHeight;
document.getElementById("d1").clientHeight;
document.getElementById("d1").scrollHeight;
document.getElementById("d1").offsetHeight;
document.getElementById("dh").clientHeight;
document.getElementById("dh").scrollHeight;
document.getElementById("dh").offsetHeight;