瞭解document.compatMode屬性

標籤：

這是前端那些事兒看的，我引用過來，方便自己以後翻看，查詢

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

官方解釋：

BackCompat：標準相容模式關閉。
CSS1Compat：標準相容模式開啟。

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

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

一個準確擷取網頁客戶區的寬高、捲軸寬高、捲軸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）

瞭解document.compatMode屬性