首頁 >web前端 >js教程 >如何跨瀏覽器準確計算 JavaScript 文件高度?

如何跨瀏覽器準確計算 JavaScript 文件高度?

Susan Sarandon
Susan Sarandon原創
2024-11-27 19:05:12667瀏覽

How to Accurately Calculate Document Height in JavaScript Across Browsers?

在JavaScript 中計算文件高度:解決相容性問題

確定文件的高度對於各種場景至關重要,例如絕對定位元素。然而,某些文件會帶來挑戰,導致使用標準方法時出現差異或不正確的值。

Fandango 和平裝本交換是兩個有問題的案例:

  • 在 Fandango 上,$(document)。 height() 傳回正確的值,而 document.height 和 document.body.scrollHeight 均為 0。
  • On Paperback Swap,$(document).height() 拋出錯誤,document.height 和 document.body.scrollHeight 都會傳回錯誤的值。

這些不一致的原因在於不同的值瀏覽器計算文件大小的方式不同。為了解決這個問題,有必要採用以下公式:

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

此方法可確保獲得最高的高度值,無論使用何種瀏覽器。

這一點很重要請注意,在完全載入之前測試文件的高度將始終導致值 0。此外,對文件或視窗大小調整的任何後續變更可能需要重新計算高度。若要處理此類情況,請利用 onload 或文件就緒事件。

以上是如何跨瀏覽器準確計算 JavaScript 文件高度?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn