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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
关于js类的定义
Jun 28 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
浅谈angular4实际项目搭建总结
Dec 01 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
在VUE中实现文件下载并判断状态的方法
Nov 08 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
php 生成WML页面方法详解
2009/08/09 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
javascript 函数调用规则
2009/08/26 Javascript
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
WebPack基础知识详解
2017/01/16 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
简单介绍Python中的JSON模块
2015/04/08 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
励志广播稿300字(5篇)
2014/09/15 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
大学生个人学习总结
2015/02/15 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
springboot实现string转json json里面带数组
2022/06/16 Java/Android
Linux中sftp常用命令整理
2022/06/28 Servers