Study Html《document.compatMode屬性》

document.compatMode用來判斷當前瀏覽器採用的渲染方式。

官方解釋:

BackCompat:標準兼容模式關閉。
CSS1Compat:標準兼容模式開啓。

當document.compatMode等於BackCompat時,瀏覽器客戶區寬度是document.body.clientWidth;
當document.compatMode等於CSS1Compat時,瀏覽器客戶區寬度是document.documentElement.clientWidth。

瀏覽器客戶區高度、滾動條高度、滾動條的Left、滾動條的Top等等都是上面的情況。

一個準確獲取網頁客戶區的寬高(viewport視口)、滾動條寬高(網頁大小)、滾動條Left和Top的代碼:

if (document.compatMode == \"BackCompat\") {
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
} else { //document.compatMode == \"CSS1Compat\"
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}

(以上代碼兼容目前流行的全部瀏覽器,包括:IE、Firefox、Safari、Opera、Chrome)

注:本文轉自 http://www.cnblogs.com/uedt/archive/2010/09/21/1832402.html

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