javascript document.compatMode兼容性


Posted in Javascript onFebruary 23, 2010

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的代码:

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; 
}
Javascript 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
基于javascript编写简单日历
May 02 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
js操作ajax返回的json的注意问题!
Feb 23 #Javascript
javascript入门基础之私有变量
Feb 23 #Javascript
第一个JavaScript入门基础 document.write输出
Feb 22 #Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 #Javascript
jQuery 操作下拉列表框实现代码
Feb 22 #Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 #Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 #Javascript
You might like
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
php下连接mssql2005的代码
2011/01/17 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
js tab 选项卡
2009/04/26 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
python刷投票的脚本实现代码
2014/11/08 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
爱我中华教学反思
2014/04/28 职场文书
建筑安全标语
2014/06/07 职场文书
教师党员个人自我评价
2015/03/04 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL