document.compatMode的CSS1compat使用介绍


Posted in Javascript onApril 03, 2014

document.compatMode

BackCompat:标准兼容模式关闭。浏览器宽度:document.body.clientWidth;

CSS1Compat:标准兼容模式开启。 浏览器宽度:document.documentElement.clientWidth。

var d = document, 
dd = d.documentElement, 

db = d.body, 

dc = d.compatMode == 'CSS1Compat', 

dx = dc ? dd: db; 
cWidth = dx.clientWidth; 
cHeight = dx.clientHeight; 
sWidth = dx.scrollWidth; 
sHeight = dx.scrollHeight; 
sLeft = dx.scrollLeft; 
sTop = dx.scrollTop;

在Standars mode中:

元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right;

在Quirks mode中:

width则是元素的实际宽度,内容宽度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + border-right-width)

在js中如何判断当前浏览器正在以何种方式解析?
document对象有个属性compatMode ,它有两个值:

BackCompat 对应quirks mode
CSS1Compat 对应strict mode

浏览器的兼容性表

http://www.quirksmode.org/compatibility.html

历史原因:

当早期的浏览器Netscape 4和Explorer 4对css进行解析时,并未遵守W3C标准,这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要,众多的浏览器开始依照W3C标准解析CSS,仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式)
firefly

Javascript 相关文章推荐
javascript window.opener的用法分析
Apr 07 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
JavaScript事件 "事件对象"的注意要点
Jan 14 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
详解React 元素渲染
Jul 07 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
javascript实现des解密加密全过程
Apr 03 #Javascript
无刷新预览所选择的图片示例代码
Apr 02 #Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 #Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 #Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 #Javascript
js 日期比较相关天数代码
Apr 02 #Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 #Javascript
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
突发奇想的一个jquery插件
2010/11/19 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
总结python实现父类调用两种方法的不同
2017/01/15 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
pandas 层次化索引的实现方法
2019/07/06 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
管道维修工岗位职责
2013/12/27 职场文书
教学实验楼管理制度
2014/02/01 职场文书
电子商务专业求职信
2014/07/10 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
运动会通讯稿300字
2015/07/20 职场文书
开学随笔
2015/08/15 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
Mysql binlog日志文件过大的解决
2021/10/05 MySQL