javascript document.compatMode兼容性
更新時間：2010年02月23日 14:20:22 作者：
文檔模式在開發(fā)中貌似很少用到，最常見的是就是在獲取頁面寬高的時候，比如文檔寬高，可見區(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。
那么寫了個準(zhǔn)確獲取網(wǎng)頁客戶區(qū)的寬高、滾動條寬高、滾動條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。
那么寫了個準(zhǔn)確獲取網(wǎng)頁客戶區(qū)的寬高、滾動條寬高、滾動條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)文章
關(guān)于JavaScript數(shù)組你所不知道的3件事
這篇文章主要為大家詳細(xì)介紹了關(guān)于JavaScript數(shù)組三個并不那么常見的功能，你所不知道的事情，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)簡單Tab欄切換案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家分享了原生js實現(xiàn)移動端瀑布流式代碼示例，對瀑布流布局感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要和大家一起學(xué)寫js Calender控件，自己動手編寫了一個簡易日歷控件，感興趣的小伙伴們可以參考一下2016-04-04
基于JS實現(xiàn)發(fā)送短信驗證碼后的倒計時功能(無視頁面刷新，頁面關(guān)閉不進(jìn)行倒計時功能)
這篇文章主要介紹了基于JS實現(xiàn)發(fā)送短信驗證碼后的倒計時功能(無視頁面刷新，頁面關(guān)閉不進(jìn)行倒計時功能)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
一款用JavaScript模仿3D立體切換效果的js焦點幻燈片特效，使用方法很簡單：用鼠標(biāo)拖拽圖片向左右方向就好～2015-10-10
在Layui中操作數(shù)據(jù)表格,給指定單元格添加事件示例
今天小編就為大家分享一篇在Layui中操作數(shù)據(jù)表格,給指定單元格添加事件示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了js簡單實現(xiàn)圖片延遲加載的方法,涉及javascript針對頁面元素的遍歷與動態(tài)設(shè)置技巧,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了JS如何修改數(shù)組對象的Key和指定的值,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-10-10
JS中的算法與數(shù)據(jù)結(jié)構(gòu)之棧(Stack)實例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之棧(Stack),結(jié)合實例形式詳細(xì)分析了js中棧的概念、原理、定義及常見使用方法,需要的朋友可以參考下2019-08-08