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 相关文章推荐
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
VSCode搭建React Native环境
May 07 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实现随机生成水印图片功能
2017/03/22 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
JS实现的排列组合算法示例
2019/07/16 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
深入讲解Python编程中的字符串
2015/10/14 Python
Python探索之创建二叉树
2017/10/25 Python
用Eclipse写python程序
2018/02/10 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
python tkinter控件布局项目实例
2019/11/04 Python
python装饰器代替set get方法实例
2019/12/19 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
土木工程专业个人求职信
2013/12/05 职场文书
网上商城创业计划书范文
2014/01/31 职场文书
企业总经理岗位职责
2014/02/13 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
优秀乡村医生先进事迹材料
2014/08/23 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
英文升职感谢信
2015/01/23 职场文书
违纪学生保证书
2015/02/27 职场文书
员工工作心得体会
2019/05/07 职场文书
2019年思想汇报
2019/06/20 职场文书
导游词之青岛崂山
2019/12/27 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
SQL Server实现分页方法介绍
2022/03/16 SQL Server
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js