document.documentElement.clientHeight和document.body.clientHeight區別


首先了解下document

HTML DOM 節點

在 HTML DOM (Document Object Model) 中 , 每一個元素都是 節點:

  • 文檔是一個文檔節點。
  • 所有的HTML元素都是元素節點。
  • 所有 HTML 屬性都是屬性節點。
  • 文本插入到 HTML 元素是文本節點。are text nodes。
  • 注釋是注釋節點。

Document 對象

當瀏覽器載入HTML 文檔,它就會成為 Document 對象

Document對象是HTML文檔的根節點。

Document對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問

提示:Document 對象是 Window 對象的一部分,可通過 window.document 屬性對其進行訪問。

通過document訪問頁面內的元素,document.documentElement返回html dom中的root 節點 即<html>,document.body返回html dom中的body節點 即<body>

所以document.documentElement是<html></html>元素,document.body是<body></body>元素。如果發現兩個高度不一樣,是css設置的問題,你的html高度不一定高於body。

用body查看,其中clientHeight即為body的css高度

用documentElement,其中clientHeight即為html的css高度

網上很多說document.documentElement.clientHeight或者document.body.clientHeight為可見高度,其實這要看body或者html標簽的css怎么設的,當body的height(css設定)一開始就和scrollHeight相等時,是不能作為可見高度的。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM