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 相关文章推荐
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 Javascript
vue @click.native 绑定原生点击事件
Apr 22 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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
拖拉表格的JS函数
2008/11/20 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
一篇文章快速了解Python的GIL
2018/01/12 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
Python对excel文档的操作方法详解
2018/12/10 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
Python用SSH连接到网络设备
2021/02/18 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
机械设计毕业生自荐信
2014/02/02 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
简历自荐信范文
2015/03/09 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
企业战略合作意向书
2015/05/08 职场文书
创业计划书之熟食店
2019/10/16 职场文书
总结Python连接CS2000的详细步骤
2021/06/23 Python
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
mysql insert 存在即不插入语法说明
2022/03/25 MySQL
vue elementUI表格控制对应列
2022/04/13 Vue.js