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 相关文章推荐
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
Nov 09 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
原生JS实现飞机大战小游戏
Jun 09 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无限极分类实现的两种解决方法
2013/04/28 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
python实现图片批量剪切示例
2014/03/25 Python
python实现的文件夹清理程序分享
2014/11/22 Python
python正则表达式之作业计算器
2016/03/18 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
介绍一些UNIX常用简单命令
2014/11/11 面试题
中专生自我鉴定范文
2013/12/19 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
违纪检讨书
2015/01/27 职场文书
北京故宫导游词
2015/01/31 职场文书
华清池导游词
2015/02/02 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
入党申请书怎么写?
2019/06/21 职场文书
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
java版 简单三子棋游戏
2022/05/04 Java/Android