Javascript中的文档模式-document.compatMode

今天在看框架的时候无意间看到了document.compatMode,经过一番资料查找,终于搞懂了。
文档模式在开发中貌似很少用到,最常见的是就是在获取页面宽高的时候,比如文档宽高,可见区域宽高等。
IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。所以为兼容性考虑,我们可能需要获取当前的文档渲染方式。
document.compatMode正好派上用场,它有两种可能的返回值:BackCompat和CSS1Compat。
BackCompat:标准兼容模式关闭。浏览器客户区宽度是document.body.clientWidth;CSS1Compat:标准兼容模式开启。 浏览器客户区宽度是document.documentElement.clientWidth。
那么写了个准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码:
 1  if  (document.compatMode  ==   " BackCompat " ) {
 2     cWidth  =  document.body.clientWidth;
 3     cHeight  =  document.body.clientHeight;
 4     sWidth  =  document.body.scrollWidth;
 5     sHeight  =  document.body.scrollHeight;
 6     sLeft  =  document.body.scrollLeft;
 7     sTop  =  document.body.scrollTop;
 8  }
 9  else  {  // document.compatMode == "CSS1Compat"
10     cWidth  =  document.documentElement.clientWidth;
11     cHeight  =  document.documentElement.clientHeight;
12     sWidth  =  document.documentElement.scrollWidth;
13     sHeight  =  document.documentElement.scrollHeight;
14     sLeft  =  document.documentElement.scrollLeft  ==   0   ?  document.body.scrollLeft : document.documentElement.scrollLeft;
15     sTop  =  document.documentElement.scrollTop  ==   0   ?  document.body.scrollTop : document.documentElement.scrollTop;
16  }
17 

 

你可能感兴趣的:(JavaScript)