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_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
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
一个简洁的多级别论坛
2006/10/09 PHP
php在线生成ico文件的代码
2007/10/09 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
通过实例学习Python Excel操作
2020/01/06 Python
8种常用的Python工具
2020/08/05 Python
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
Ajax和javascript的区别
2013/07/20 面试题
机房搬迁方案
2014/05/01 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
滴水洞导游词
2015/02/10 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
个人年底工作总结
2015/03/10 职场文书
大学生求职信怎么写
2015/03/19 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书