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 3D 标签云示例代码
Jun 12 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
vue实现页面加载动画效果
Sep 19 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
angular4中引入echarts的方法示例
Jan 29 Javascript
vue2.0项目集成Cesium的实现方法
Jul 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
我的论坛源代码(四)
2006/10/09 PHP
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
php动态函数调用方法
2015/05/21 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
动态加载jquery库的方法
2014/02/12 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
简单实现python进度条脚本
2017/12/18 Python
Keras自定义IOU方式
2020/06/10 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
python的dict判断key是否存在的方法
2020/12/09 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
应届毕业生个人自荐信范文
2013/11/30 职场文书
工程力学专业自荐信范文
2014/03/17 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
校园标语大全
2014/06/19 职场文书
公司证明怎么写
2014/09/22 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis