javascript document.compatMode兼容性
更新時(shí)間：2010年02月23日 14:20:22 作者：
文檔模式在開發(fā)中貌似很少用到，最常見的是就是在獲取頁面寬高的時(shí)候，比如文檔寬高，可見區(qū)域?qū)捀叩取?/div>
IE對盒模型的渲染在 Standards Mode和Quirks Mode是有很大差別的，在Standards Mode下對于盒模型的解釋和其他的標(biāo)準(zhǔn)瀏覽器是一樣，但在Quirks Mode模式下則有很大差別，而在不聲明Doctype的情況下，IE默認(rèn)又是Quirks Mode。所以為兼容性考慮，我們可能需要獲取當(dāng)前的文檔渲染方式。
document.compatMode正好派上用場，它有兩種可能的返回值：BackCompat和CSS1Compat。
BackCompat：標(biāo)準(zhǔn)兼容模式關(guān)閉。瀏覽器客戶區(qū)寬度是document.body.clientWidth；CSS1Compat：標(biāo)準(zhǔn)兼容模式開啟。 瀏覽器客戶區(qū)寬度是document.documentElement.clientWidth。
那么寫了個(gè)準(zhǔn)確獲取網(wǎng)頁客戶區(qū)的寬高、滾動(dòng)條寬高、滾動(dòng)條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;
}
document.compatMode正好派上用場，它有兩種可能的返回值：BackCompat和CSS1Compat。
BackCompat：標(biāo)準(zhǔn)兼容模式關(guān)閉。瀏覽器客戶區(qū)寬度是document.body.clientWidth；CSS1Compat：標(biāo)準(zhǔn)兼容模式開啟。 瀏覽器客戶區(qū)寬度是document.documentElement.clientWidth。
那么寫了個(gè)準(zhǔn)確獲取網(wǎng)頁客戶區(qū)的寬高、滾動(dòng)條寬高、滾動(dòng)條Left和Top的代碼：
復(fù)制代碼 代碼如下:
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;
}
相關(guān)文章
js實(shí)現(xiàn)div在頁面拖動(dòng)效果
這篇文章主要介紹了js實(shí)現(xiàn)div在頁面拖動(dòng)效果,涉及JavaScript動(dòng)態(tài)操作頁面元素與數(shù)值計(jì)算的相關(guān)技巧,需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細(xì)介紹了jsonp跨域請求的相關(guān)資料，激活了所有接口支持瀏覽器跨域請求的封裝，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了JS+CSS3模擬溢出滾動(dòng)效果的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
用box固定長寬實(shí)現(xiàn)圖片自動(dòng)輪播js代碼
這篇文章主要介紹了用box固定長寬實(shí)現(xiàn)圖片自動(dòng)輪播效果,需要的朋友可以參考下2014-06-06
使用phantomjs進(jìn)行網(wǎng)頁抓取的實(shí)現(xiàn)代碼
這篇文章主要介紹了使用phantomjs進(jìn)行網(wǎng)頁抓取的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-09-09
這篇文章主要詳細(xì)介紹了vue 自定義指令directive的使用場景，文中有詳細(xì)的代碼示例，感興趣的小伙伴歡迎閱讀2023-04-04
本節(jié)主要介紹了ie8下面處理 new Date()的問題,需要的朋友可以參考下2014-07-07
如果一個(gè)函數(shù)訪問了此函數(shù)的父級(jí)及父級(jí)以上的作用域變量,那么這個(gè)函數(shù)就是一個(gè)閉包,本文將給大家分享js閉包的6種應(yīng)用場景,文中有詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
Bootstrap彈出框modal上層的輸入框不能獲得焦點(diǎn)問題的解決方法
這篇文章主要介紹了Bootstrap彈出框modal上層的輸入框不能獲得焦點(diǎn)問題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript實(shí)現(xiàn)的冒泡排序法及統(tǒng)計(jì)相鄰數(shù)交換次數(shù)示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的冒泡排序法及統(tǒng)計(jì)相鄰數(shù)交換次數(shù),結(jié)合實(shí)例形式分析了javascript冒泡排序的實(shí)現(xiàn)技巧及針對交換次數(shù)的統(tǒng)計(jì)方法,便于更直觀的了解冒泡排序算法,需要的朋友可以參考下2017-04-04