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 相关文章推荐
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
js实现延迟加载的方法
Jun 24 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
js+css实现红包雨效果
Jul 12 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
vue element-ui实现动态面包屑导航
Dec 23 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
vue实现学生信息管理系统
May 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
php生成txt文件标题及内容的方法
2014/01/16 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
linux中cd命令使用详解
2015/01/08 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
微信小程序实现随机验证码功能
2018/12/20 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
Python程序设计入门(5)类的使用简介
2014/06/16 Python
Python中join和split用法实例
2015/04/14 Python
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Django在win10下的安装并创建工程
2017/11/20 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
社会调查研究计划书
2014/05/01 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
督导岗位职责
2015/02/04 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
Java线程的6种状态与生命周期
2022/05/11 Java/Android