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 相关文章推荐
JS重要知识点小结
Nov 06 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
解决vue项目使用font-awesome,build后路径的问题
Sep 01 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
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 定界符格式引起的错误
2011/05/24 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
PHP使用递归生成文章树
2015/04/21 PHP
JScript中的"this"关键字使用方式补充材料
2007/03/08 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
js+html制作简单验证码
2017/02/16 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
小程序外卖订单界面的示例代码
2019/12/30 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
采购员岗位职责
2013/11/15 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
工程部岗位职责范本
2015/04/11 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
七年级思品教学反思
2016/02/20 职场文书
PHP基本语法
2021/03/31 PHP
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python