首先了解下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相等時,是不能作為可見高度的。