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