document.compatMode标准兼容模式判断

今天看一个插件的源码,看到了document.compatMode的用法,用来判断浏览器是否是标准的兼容模式,经过查找一些资料,终于明白了。下面是一些说明。

文档模式在开发中貌似很少用到,最常见的是就是在获取页面宽高的时候,比如文档宽高,可见区域宽高等。

IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。所以为兼容性考虑,我们可能需要获取当前的文档渲染方式。<p>
document.compatMode正好派上用场,它有两种可能的返回值:BackCompat和CSS1Compat。

BackCompat:标准兼容模式关闭。浏览器客户区宽度是document.body.clientWidth;CSS1Compat:标准兼容模式开启。 浏览器客户区宽度是document.documentElement.clientWidth。

那么写了个准确获取网页客户区的宽高、滚动条宽高、滚动条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;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 大家好,我是IT修真院深圳分院第01期学员,一枚正直善良的web程序员。 今天给大家分享一下,修真院官网 CSS任...
    长天_阅读 12,325评论 1 7
  • 一、HTML 1. 针对移动浏览器端开发页面,不期望用户放大屏幕,且要求“视口(viewport)”宽度等于屏幕宽...
    darr250阅读 18,384评论 0 26
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • 思绪万千却凌乱如发 丝丝缕缕又未有起始 夜晚微风也许不止吹乱我的发 也撩乱我的思绪 燥热的气温就像调皮的...
    姓董名什么阅读 181评论 0 1