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