offsetHeightとclientHeightの違い

154

javascript dom-要素のoffsetHeightとclientHeightの違いは何ですか？

javascript

— スティーブ
ソース

ここに良いデモ例jsfiddle.net/shibualexis/yVhgM/3

— GibboK

回答:

203

clientHeight：

オブジェクトの可視領域の高さをピクセル単位で返します。値にはパディング付きの高さが含まれますが、scrollBar、境界線、およびマージンは含まれません。

offsetHeight：

オブジェクトの可視領域の高さをピクセル単位で返します。値には、パディング、scrollBar、およびボーダーを含む高さが含まれますが、マージンは含まれません。

したがって、offsetHeightスクロールバーとボーダーは含まれますが、含まれclientHeightません。

— オデ
ソース

私が気付いたもう1つの点は、clientHeightがoffsetHeightよりもはるかに高速であることです。なぜか分かりますか？

— disc0dancer 2013年

@ disc0dancer-おそらくブラウザはすでにclientSize利用可能な（結局のところ、それがビューポートである）ためですがoffsetHeight、ドキュメント全体をリフローした後で計算する必要がありますか？

— 2013年

まあ、webkitインスペクターは、clientHeighを要求した場合でも、リフローはドキュメント全体にもあると言っています。

— disc0dancer 2013年

@ disc0dancer-私の推測ではこれで終わりです。しかし、これは実装の問題です。すべてのブラウザがそのようになっているとは限りません。

— 2013年

Odedからの答えは理論です。しかし、理論と現実は必ずしも同じではありません。少なくとも、JavaScriptでのスクロール操作に重要な<BODY>要素や<HTML>要素についてはそうではありません。

MicrosoftはMSDNで素晴らしいイメージを持っています：

ClientHeight、OffsetHeight、ScrollHeight

垂直スクロールバーを表示するHTMLページがある場合、この画像が示すように、<BODY>要素または<HTML>要素のいずれかが、OffsetHeightよりも大きいScrollHeightを持っていると予想されます。これは、すべての古いバージョンのInternet Explorerに当てはまります。

しかし、これはInternet Explorer 11とFirefox 36には当てはまりません。少なくとも、これらのブラウザーでは、OffsetHeightはScrollHeightとほぼ同じで、間違っています。

そして、OffsetHeightは間違っているかもしれませんが、ClientHeightは常に正しいです。

別のブラウザで次のコードを試してみてください。

<!DOCTYPE html>
<html>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script>
    document.write("Body off: " + document.body.offsetHeight 
             + "<br>Body cli: " + document.body.clientHeight
             + "<br>Html off: " + document.body.parentElement.offsetHeight               
             + "<br>Html cli: " + document.body.parentElement.clientHeight);
</script>
</body>
</html>

古いInternet Explorerは正しく表示されますが、

Body off: 1197
Body cli: 1197
Html off: 878
Html cli: 874

FirefoxおよびInternet Explorer 11からの出力は次のとおりです。

Body off: 1260
Body cli: 1260
Html off: 1276   // this is completely wrong
Html cli: 889

ここでは、offsetHeightが間違っていることを明確に示しています。OffsetHeightとClientHeightは、数ピクセルだけ異なるか、同じでなければなりません。

ClientHeightとOffsetHeightは、<Heart>が実際のフォームのサイズでClientHeightがゼロの場合など、<FORM>のように表示されない要素でも極端に異なる場合があることに注意してください。

— エルム
ソース