【javascript】标准模式与怪异模式下CSS以及JS的区别

标准模式与怪异模式下CSS的区别

见这篇文章《【css】怪异模式下的盒模型》

/article/6592087.html

标准模式与怪异模式下JS的区别

document.compatMode属性可以判断是否是标准模式，当 document.compatMode为“CSS1Compat”，是标准模式，“BackCompat”是怪异模式。

区别主要体现在两方面：

一、获取当前视口大小

在IE，firefox,safari,opera,chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight保存的是页面视口的信息。

在IE6中，这些属性必须在标准模式下才生效，在怪异模式下，通过document.body.clientWidth和document.body.clientHeight获取，对于混杂模式的chrome，通过document.body,document.documentElement获取的大小是一样的

兼容代码如下：

1 function getViewport(){
2 var doc = document,
3 docElem = doc.documentElement,
4 body = doc.body;
5 return document.compatMode === "CSS1Compat" ? {
6 width : docElem.clientWidth,
7 height : docElem.clientHeight
8 } : {
9 width : body.clientWidth,
height : body.clientHeight
};
}

二、获取文档的总高度

scrollWidth,scrollHeight用于确定元素内容的实际大小。通常认为html元素是在web浏览器的视口中滚动的元素（IE6之前版本运行在怪异模式下时是body）。因此

垂直滚动条的页面总高度总是document.documentElement.scrollHeight。

对于不滚动的页面而言，scrollWidth和scrollHeight与clientWidth和clientHeight之间的关系很含糊。在这种情况下，基于document.documentElement查看这些属性

会在不同浏览器之间发现不一致的问题，如下：

1、firefox中两组属性始终是相等的，但大小代表的是文档内容区域的实际尺寸，而非视口的尺寸。

2、opera,safari3.1以及更高的版本、chrome中的两组属性有差别，其中，scrollWidth,scrollHeight等于视口大小，而clientWidth、clientHeight等于文档内容区域的大小。

3、IE标准模式下，其中，scrollWidth,scrollHeight等于文档内容区域的大小，而clientWidth、clientHeight等于视口大小。

因此在确定文档的总高度时候，必须取得scrollHeight/scrollWidth 与clientHeight/clientWidth，怪异模式下，将document.documentElement换成body

兼容代码如下：

function getScrollHeight(){
var doc = document,
docElem = doc.documentElement,
body = doc.body;
return {
width : Math.max(docElem.scrollWidth, docElem.clientWidth, body.scrollWidth, body.clientWidth),
height : Math.max(docElem.scrollHeight, docElem.clientHeight, body.scrollHeight, body.clientHeight)
};
}

参考文档：

《javascript高级程序设计》第三版 12.2.3 “元素大小”