可能你會覺得獲取可視區寬高不是很簡單嗎

原生js獲取高度不就是就window.innerHeight一句話的事，可是真的這么簡單嗎

來看個測試頁面,如果頁面帶有橫向縱向的滾動條，我們打印出各個高度進行查看對比

順便你也可以看看document.body和document.documentElement在各個瀏覽器的差異;document.documentElement返回的是整個文檔的根節點即 html標簽；document.body 返回的是DOM對象里的body子節點，即 body 標簽

console.log('document.documentElement.clientHeight-' document.documentElement.clientHeight); console.log('document.documentElement.scrollHeight-' document.documentElement.scrollHeight); console.log('document.documentElement.offsetHeight-' document.documentElement.offsetHeight); console.log('document.body.clientHeight-' document.body.clientHeight); console.log('document.body.scrollHeight-' document.body.scrollHeight); console.log('document.body.offsetHeight-' document.body.offsetHeight); console.log('window.innerHeight-' window.innerHeight);

ie8下各個值

ie9下各個值

ie10跟ie9一樣不列圖了

ie11下各個值

6. 火狐瀏覽器下各個值

chorme瀏覽器下各個值

通過以上各圖對比不難看出（先排除ie8）

window.innerHeight = document.documentElement.clientHeight 滾動條高度；

如果沒有滾動條則window.innerHeight = document.documentElement.clientHeight

在來說說ie8

ie8比較特殊不支持window.innerHeight并且html還自帶有2像素的邊框; 可以通過document.documentElement.offsetHeight - 2 * 2得到window.innerHeight的值

所以ie8的window.innerHeight = document.documentElement.offsetHeight - 2 * 2 = document.documentElement.clientHeight 滾動條高度。

如果沒有滾動條window.innerHeight = document.documentElement.offsetHeight - 2 * 2 = document.documentElement.clientHeight

所以獲取可視區的高度不是簡單的window.innerHeight，真正的可視區高度不應該包括滾動條

/** * 獲取視口寬高 兼容兼容到ie8 * @param {boolean} flag 標識返回的寬高是否包含滾動條 * @return {object} {widht: xxx, height: xxx} 視口寬高 / function getViewPort (flag) {if (typeof flag === 'undefined') {return {width: document.documentElement.clientWidth,height: document.documentElement.clientHeight};}if (flag === true) {// ie8 html 有2像素邊框 上下, 左右 4像素return {width: window.innerWidth || document.documentElement.offsetWidth - 2 * 2,height: window.innerHeight || document.documentElement.offsetHeight - 2 * 2};} }

獲取文檔的寬高呢

通過以上各圖的對比，整個文檔的高度，可以通過document.documentElement.scrollHeight來獲取各個瀏覽器都比較一致，你也不必糾結到底是用document.body 還是用document.documentElement; 用clientHeight還是offsetHeight

/** * 獲取文檔寬高 兼容兼容到ie8 * * @return {object} {widht: xxx, height: xxx} 視口寬高 / function getDocumentPort (flag) {return {width: document.documentElement.scrollWidth,height: document.documentElement.scrollHeight}; }

總結

以上是生活随笔為你收集整理的你真的懂js获取可视区宽高吗的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。