js中的文檔模式-document.compatMode

今天在看框架的時候無心間看到了document.compatMode，通過一番資料查找，終於搞懂了。

文檔模式在開發中貌似不多用到，最多見的是就是在獲取頁面寬高的時候，好比文檔寬高，可見區域寬高等。

IE對盒模型的渲染在 Standards Mode和Quirks Mode是有很大差異的，在Standards Mode下對於盒模型的解釋和其餘的標準瀏覽器是同樣，但在Quirks Mode模式下則有很大差異，而在不聲明Doctype的狀況下，IE默認又是Quirks Mode。因此爲兼容性考慮，咱們可能須要獲取當前的文檔渲染方式。

document.compatMode正好派上用場，它有兩種可能的返回值：BackCompat和CSS1Compat。

BackCompat：標準兼容模式關閉。瀏覽器客戶區寬度是document.body.clientWidth；CSS1Compat：標準兼容模式開啓。 瀏覽器客戶區寬度是document.documentElement.clientWidth。

那麼寫了個準確獲取網頁客戶區的寬高、滾動條寬高、滾動條Left和Top的代碼：

view source

print ?

01	if (document.compatMode == "BackCompat") {

02	cWidth = document.body.clientWidth;

03	cHeight = document.body.clientHeight;

04	sWidth = document.body.scrollWidth;

05	sHeight = document.body.scrollHeight;

06	sLeft = document.body.scrollLeft;

07	sTop = document.body.scrollTop;

08

}

09	else { //document.compatMode == "CSS1Compat"

10	cWidth = document.documentElement.clientWidth;

11	cHeight = document.documentElement.clientHeight;

12	sWidth = document.documentElement.scrollWidth;

13	sHeight = document.documentElement.scrollHeight;

14	sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;

15	sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;

16

}