document.compatMode浅谈动态绑定api

中关村村草

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


Js代码

1. 1./*  
   
2. 2.获取页面视觉区域的宽度  
   
3. 3.思路需要判断当前的document.compatMode  
   
4. 4.*/  
   
5. 5.getViewWidth: function(){   
   
6. 6.         var doc = document,   
   
7. 7.               client = doc.compatMode == 'BackCompat' ? doc.body : doc.documentElement;   
   
8. 8.        return client.clientWidth;   
   
9. 9.}  
   
10. /*
    
11. 获取页面视觉区域的宽度
    
12. 思路需要判断当前的document.compatMode
    
13. */
    
14. getViewWidth: function(){
    
15.          var doc = document,
    
16.                client = doc.compatMode == 'BackCompat' ? doc.body : doc.documentElement;
    
17.         return client.clientWidth;
    
18. }

复制代码

Js代码

1. 1./*  
   
2. 2.获取页面视觉区域的高度  
   
3. 3.思路和上面一致  
   
4. 4.*/  
   
5. 5.getViewHeight = function(){   
   
6. 6.     var doc = document,   
   
7. 7.           client = doc.compatMode == 'BackCompat' ? doc.body : doc.documentElement;   
   
8. 8.     return client.clientHeight;   
   
9. 9.}  
   
10. /*
    
11. 获取页面视觉区域的高度
    
12. 思路和上面一致
    
13. */
    
14. getViewHeight = function(){
    
15.      var doc = document,
    
16.            client = doc.compatMode == 'BackCompat' ? doc.body : doc.documentElement;
    
17.      return client.clientHeight;
    
18. }

复制代码

Js代码

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

复制代码