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 相关文章推荐
用jquery来定位
Feb 20 Javascript
javascript实现的动态文字变换
Jul 28 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 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一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
JS定时器实例
2013/04/17 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
wxPython色环电阻计算器
2019/11/18 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
毕业生自我鉴定
2013/11/05 职场文书
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
本科生自荐信
2014/06/18 职场文书
门面房租房协议书
2014/12/01 职场文书
出纳岗位职责
2015/01/31 职场文书
西安导游词
2015/02/12 职场文书
升职自荐信怎么写
2015/03/05 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
关于vue-router-link选择样式设置
2022/04/30 Vue.js