前往顾页
以后地位: 主页 > 收集编程 > Jsp实例教程 >

document.compatMode介绍

时候:2015-03-06 20:59来源:知行网www.zhixing123.cn 编辑:麦田守望者

可能有很多朋友和我有一样经历,一个网页中的一般的、“完美”的JS代码,放到另外一个网页中就变得不那么完美了。这问题很奇特,最后找到启事,是因为一个网页有标准声明,另外一个没有。

document.compatMode,可以用来判定以后页面采取的衬着体例。下面官方文档的申明:
BackCompat:标准兼容形式封闭。
CSS1Compat:标准兼容形式开启。

当document.compatMode即是BackCompat时,浏览器客户区宽度是document.body.clientWidth;
当document.compatMode即是CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。

浏览器客户区高度、动弹条高度、动弹条的Left、动弹条的Top等等都是下面的环境。

经我研究和多次测试后,写了个精确获得网页客户区的宽高、动弹条宽高、动弹条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;
}

(以上代码兼容目前风行的全数浏览器,包含:IE、Firefox、Safari、Opera、Chrome

------分开线----------------------------
标签(Tag):Javascript javascript实例教程 JavaScript源代码 JavaScript根本教程
------分开线----------------------------
保举内容
猜你感兴趣