javascriptdocument.compatMode兼容性
兼容性 Javascriptdocument
2023-06-13 09:14:16 时间
IE对盒模型的渲染在StandardsMode和QuirksMode是有很大差别的，在StandardsMode下对于盒模型的解释和其他的标准浏览器是一样，但在QuirksMode模式下则有很大差别，而在不声明Doctype的情况下，IE默认又是QuirksMode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。
document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat。
BackCompat：标准兼容模式关闭。浏览器客户区宽度是document.body.clientWidth；CSS1Compat：标准兼容模式开启。浏览器客户区宽度是document.documentElement.clientWidth。
那么写了个准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码：
复制代码代码如下:
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;
}