容器高度或者寬度的獲取方式

爲了使表格或者一些數據能能夠自適應瀏覽器的寬度或者高度,就不可避免的要獲取瀏覽器的尺寸

電腦屏幕尺寸的獲取方式

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 的區別

依水間的博客:document.compatMode介紹

【DOCTYPE】兼容模式和標準模式

doctype的作用

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章