CSS Web獲取頁面高度是很常見的需求,因為我們需要知道頁面的高度來幫助我們進行一些布局或者交互操作。接下來,我們來了解一下如何使用 CSS 來獲取頁面的高度吧。
在 CSS 中,我們可以利用
window.innerHeight或者
document.documentElement.clientHeight來獲取當前瀏覽器窗口的高度。這兩種方法得到的高度是一樣的。
var windowHeight = window.innerHeight || document.documentElement.clientHeight; console.log('窗口高度:' + windowHeight);
不過,如果你想獲取整個頁面的高度(包括滾動條的高度),那么可以使用下面的代碼:
var pageHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.documentElement.clientHeight); console.log('頁面高度:' + pageHeight);
其中
document.body.scrollHeight是包含內(nèi)容和滾動條在內(nèi)的整個文檔高度,
document.documentElement.scrollHeight和
document.documentElement.offsetHeight則是文檔頂部到視口底部的高度,也就是用戶看到的頁面高度。
最后,我們需要注意的是,獲取頁面高度的方法只能在頁面加載完畢后才能執(zhí)行。