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 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 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与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
php addslashes和mysql_real_escape_string
2010/01/24 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
Vue实现web分页组件详解
2017/11/28 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
Python探索之修改Python搜索路径
2017/10/25 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
德国PC硬件网站:CASEKING
2016/10/20 全球购物
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
物流专业大学的自我评价
2014/01/11 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
病人慰问信范文
2015/02/15 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis