document.compatMode浅谈动态绑定api

最新推荐文章于 2021-04-01 17:01:45 发布

最新推荐文章于 2021-04-01 17:01:45 发布 · 131 阅读

文章标签：

#jquery #compatMode #ViewUI

js-兼容性差异专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了如何在不同兼容模式下获取网页的视觉区域宽高，并通过自定义函数实现动态绑定，节约代码复用。重点突出在不声明DOCTYPE的情况下，IE浏览器的默认兼容模式为QuirksMode，以及如何根据document.compatMode来正确获取视觉区域的尺寸。

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];
      }
});