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 页面坐标相关知识整理
Jan 09 Javascript
javascript parseInt() 函数的进制转换注意细节
Jan 08 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
js实现HashTable(哈希表)的实例分析
Nov 21 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
Js经典案例的实例代码
May 10 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
react中的DOM操作实现
Jun 30 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
一个用于MySQL的PHP XML类
2006/10/09 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
python实现rest请求api示例
2014/04/22 Python
python处理大数字的方法
2015/05/27 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
Python输出各行命令详解
2018/02/01 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
python实现图像拼接功能
2020/03/23 Python
Python Http请求json解析库用法解析
2020/11/28 Python
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
市场推广策划方案
2014/06/02 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
保险公司增员口号
2015/12/25 职场文书
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS