對於document.compatMode，很多朋友可能都根我一樣很少接觸，知道他的存在卻不清楚他的用途。今天在ext中看到 document.compatMode的使用，感覺這個對於我們開發兼容性的web頁面還是很有幫助，我們都知道，IE對盒模型的渲染在 Standards Mode和Quirks Mode是有很大差別的，在Standards Mode下對於盒模型的解釋和其他的標準瀏覽器是一樣，但在Quirks Mode模式下則有很大差別，而在不聲明Doctype的情況下，IE默認又是Quirks Mode。所以為兼容性考慮，我們可能需要獲取當前的文檔渲染方式。
document.compatMode正好派上用場，它有兩種可能的返回值：BackCompat和CSS1Compat，對其解釋如下：
BackCompat Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat Standards-compliant mode is switched on. (Standards Mode)
在實際的項目中，我們還需要在獲取瀏覽是否IE，這樣就可以得到IE的渲染模式了。在Ext中的代碼：isBorderBox=isIE&&!isStrict。
當文檔有了標準聲明時， document.compatMode 的值就等於 "CSS1compat"， 因此， 我們可以根據 document.compatMode 的值來判斷文檔是否加了標準聲明
var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
document.compatMode用來判斷當前瀏覽器採用的渲染方式。
官方解釋：
BackCompat：標準兼容模式關閉。
CSS1Compat：標準兼容模式開啟。
當document.compatMode等於BackCompat時，瀏覽器客戶區寬度是document.body.clientWidth；
當document.compatMode等於CSS1Compat時，瀏覽器客戶區寬度是document.documentElement.clientWidth。
瀏覽器客戶區高度、滾動條高度、滾動條的Left、滾動條的Top等等都是上面的情況。
一個準確獲取網頁客戶區的寬高、滾動條寬高、滾動條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;
}
（以上代碼兼容目前流行的全部瀏覽器，包括：IE、Firefox、Safari、Opera、Chrome）
// JavaScript Document
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 3 //set x offset of bar in pixels
var startY = 150 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
function get_cookie(Name) {
var search = Name + "=";
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end));
}
}
return returnvalue;
}
/*--
function hidebar(){
if (persistclose)
document.cookie="remainclosed=1";
document.getElementById("M").style.display="none";
document.getElementById("show_M").style.display="block";
}
function showbar(){
if(persistclose==0)
document.cookie="remainclosed=0";
document.getElementById("M").style.display="block";
document.getElementById("show_M").style.display="none";
}
--*/
function staticbar(){
barheight=document.getElementById("float_qq").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("float_qq");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false);
else if (window.attachEvent)
window.attachEvent("onload", staticbar);
else if (document.getElementById)
window.onload=staticbar;
閱讀更多 未來的語言 的文章
