Chinaunix

标题: document.compatMode浅谈动态绑定api [打印本页]
作者: 中关村村草    时间: 2011-11-04 17:48
标题: 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.});  
复制代码




欢迎光临 Chinaunix (http://bbs.chinaunix.net/) Powered by Discuz! X3.2