你真的懂js獲取可視區寬高嗎

摘要： 原生js獲取高度不就是就window.innerHeight一句話的事，可是真的這麼簡單嗎 來看個測試頁面,如果頁面帶有橫向縱向的滾動條，我們打印出各個高度進行檢視對比 順便你也可以看看document.body和document.documentElement在各個瀏覽器的差異;do...

原生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);
複製程式碼

1. ie8下各個值

2. ie9下各個值

3. ie10跟ie9一樣不列圖了
4. ie11下各個值

6. 火狐瀏覽器下各個值

7. 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
};
}

複製程式碼