爲了使表格或者一些數據能能夠自適應瀏覽器的寬度或者高度,就不可避免的要獲取瀏覽器的尺寸
電腦屏幕尺寸的獲取方式
window.screen.height //獲取電腦屏幕分辨率的高度
window.screen.width //獲取電腦屏幕分辨率的寬度
window.screen.availHeight // 獲取電腦屏幕的有效高度(例如 出去任務欄,有頂部欄的也會除去)
window.screen.availWidth //獲取電腦屏幕的有效寬度
獲取電腦屏幕的寬度或者高度是不用去考慮 兼容模式的問題
那必然 獲取瀏覽器的尺寸就一定要注意兼容模式的問題
瀏覽器中尺寸(高度、寬度、滾動條高度)的獲取方式
document.body.clientHeight //獲取瀏覽器的body對象的高度
document.body.clientWidth //獲取瀏覽器的body對象的寬度
document.documentElement.clientHeight // 獲取瀏覽器的可見高度
document.documentElement.clientHeight //獲取瀏覽器的可見寬度
由於歷史原因 ,瀏覽器對頁面的渲染會存在兩種模式:
1 標準模式 舊的渲染方法(ie)
2 兼容模式 W3C標準規範
兩種模式由於計算方式不同 獲取同一個容器的高度和寬度 會根據 margin border padding 有一定區別
這個標籤如果設置了就是兼容模式 會按照w3c的標準去解析html頁面 但是如果沒有設置會按照 backCompat 也就是標準模式 又稱怪異模式(不同的瀏覽器會按照自己的解析方式去解析)這種就會在不同的瀏覽器中出現不可知的問題!
一般獲取尺寸是要考慮兼容:
//獲取瀏覽器的高度
function getClientHeight(domId){
//domId 爲當前容器的id
var roolEl;//設置一個臨時變量
if(domId = null){
//document.compatMode用來獲取當前瀏覽器的模式
//CSS1Compat 爲兼容模式 W3c指定
roolEl = document.compatMode == "CSS1Compat" ? document.documentElement : document.body;
}else{
roolEl = document.ElementById(domId);//獲取指定容器的對象
}
var rootHd = parentInt(roolEl.clientHeight);//獲取當前容器的高度
return rootHd;//返回當前容器高度數據
}
寬度的獲取和高度差不多 使用 clientWidth即可;
參考資料:
document.body.clientHeight 和 document.documentElement.clientHeight 的區別