document.compatMode浅谈动态绑定api

 

document.compatMode返回的值

 

 

• BackCompat-----------------------Quirks Mode

• CSS1Compat----------------------Standards Mode (标准兼容模式)

在不声明Doctype的情况下，IE默认是Quirks Mode

1. 当document.compatMode 为BackCompat时，浏览器视觉区域的宽度document.body.clientWidth

2. 当document.compatMode 为Standards Mode时，浏览器视觉区域的宽度document.documentElement.clientWidth

/*
获取页面视觉区域的宽度
思路需要判断当前的document.compatMode
*/
getViewWidth: function(){
         var doc = document,
               client = doc.compatMode == 'BackCompat' ? doc.body : doc.documentElement;
        return client.clientWidth;
}

 

/*
获取页面视觉区域的高度
思路和上面一致
*/
getViewHeight = function(){
     var doc = document,
           client = doc.compatMode == 'BackCompat' ? doc.body : doc.documentElement;
     return client.clientHeight;
}

 

/*
仿照使用$.each----动态绑定 节约复用
*/
$.each(['Width','Height'],function(i,v){
      jQuery.fn['getView'+v] = function(){
                  var doc = document,
                        client = doc.compatMode == 'BackCompat' ? doc.body :                               doc.documentElement;
                  var type = 'client'+v;
                  return client[type];
      }
});