关于 document.compatMode
今天查资料时无意发现一个以前没有注意到过的属性:document.compatMode
经过一番资料的查询后,了解到以下信息:
我们都知道IE有两种盒子模型,在不声明 !DOCTYPE 时是混杂模式 (Quirks Mode),在声明了 !DOCTYPE 时与其他标准浏览器一致,是标准模式 (Standards Mode)
document.compatMode 有两个属性值:
BackCompat ----- 表示标准规范模式关闭,即当前为混杂模式 (Quirks Mode),此时浏览器客户区宽度为 document.body.clientWidth
CSS1Compat ---- 表示标准规范模式开启,即当前为标准模式 (Standards Mode),此时浏览器客户区宽度为 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;
}
最后推荐一个网站:
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/compatMode
关于 document.compatMode的更多相关文章
- document.compatMode
在我电脑屏幕上显示的 电脑是 1920*1080这是在document.compatMode:css1Compat模式 window.screen.availWidth 1920 window.scr ...
- 前端面霸系列(1):doctype 、Quirks Mode & Standards Mode 、document.compatMode
近几日,气压猛降,雾霾铺天盖地,眼看一场腥风血雨就要在前端江湖爆发,这场战争不仅是百度.腾讯.阿狸.搜狐网易新浪等江湖豪门抢夺人才的大战,也是诸位江湖人士重新洗牌的好时机.每年10月,江湖的波动胜过华 ...
- document.compatMode属性
document.compatMode用来判断当前浏览器采用的渲染方式. 官方解释: BackCompat:标准兼容模式关闭.CSS1Compat:标准兼容模式开启. 当document.compat ...
- javascript document.compatMode属性
文档模式在开发中貌似很少用到,最常见的是就是在获取页面宽高的时候,比如文档宽高,可见区域宽高等. IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Stand ...
- document.compatMode属性和获取鼠标的位置
document.compatMode属性 document.compatMode用来判断当前浏览器采用的渲染方式. 官方解释: BackCompat:标准兼容模式关闭.CSS1Compat:标准兼容 ...
- document.compatMode(判断当前浏览器采用的渲染方式)
转载自:http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html IE对盒模型的渲染在 Standards Mode和Quirk ...
- document.compatMode的CSS1compat
document.compatMode BackCompat:标准兼容模式关闭.浏览器宽度:document.body.clientWidth: CSS1Compat:标准兼容模式开启. 浏览器宽度: ...
- artDialog Error: document.compatMode === "BackCompat 报错原因
今天在使用artDialog的时候报错了提示artDialog Error: document.compatMode === "BackCompat 查了网上说 可以设置<!DOCTY ...
- document.compatMode简介
对于document.compatMode,很多朋友可能很少接触,知道他的存在却不清楚他的用途.今天在ext中看到 document.compatMode的使用,感觉这个对于我们开发兼容性的web页面 ...
- document.compatMode属性介绍
之前不了解这个属性,今天总结一下,以后可能会用到. 对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途.今天在ext中看到 document.co ...
随机推荐
- flask_restful
from flask_restful import (Resource, reqparse) # 参数解析对象生成 parser = reqparse.RequestParser() parser.a ...
- CentOS 7 基础网络配置
基础的网络配置,包括静态IP地址.子网掩码.网关.DNS,使用 nmtui 和 nmcli 工具时必须开启 NetworkManager 服务 文本用户界面工具 nmtui [root@localho ...
- CentOS 7 开放防火墙端口 命令(转载)
CentOS 7 开放防火墙端口 命令 最近公司新的server要求用CentOS7, 发现以前CentOS 6 系列中的 iptables 相关命令不能用了,查了下,发现Centos 7使用fire ...
- varchar和varchar2的区别
varchar是标准sql里面的. varchar2是oracle提供的独有的数据类型. varchar对于汉字占两个字节,对于英文是一个字节,占的内存小,varchar2都是占两个字节. varch ...
- LOJ6503. 「雅礼集训 2018 Day4」Magic(容斥原理+NTT)
题目链接 https://loj.ac/problem/6503 题解 题中要求本质不同的序列数量,不太好搞.我们考虑给相同颜色的牌加上编号,这样所有牌都不相同.那么如果我们求出了答案,只需要将答案除 ...
- BZOJ - 3224 可持久化Treap 树形操作
这个题目去年就做过了,这次稍微改了一下 都是基础操作 #include<iostream> #include<algorithm> #include<cstdio> ...
- JS获取按键的代码,Js如何屏蔽用户的按键
[From] http://www.zgguan.com/zsfx/jsjc/1181.html 在使用JavaScript做WEB键盘事件侦听捕获时,主要采用onkeypress,onkeydown ...
- JavaScript学习笔记1_基础与常识
1.六种数据类型 5种基础的:Undefined,Null,Boolean,Number,String(其中Undefined派生自Null) 1种复杂的:Object(本质是一组无序键值对) 2.字 ...
- quartz使用(整合spring)
quartz与spring整合后,还是需要Scheduler实例.JobDetail实例.Trigger实例,只不过是用FactoryBean的方式创建了. 在spring-context-suppo ...
- oracle12C--DG 状态集
一,物理备库 01,状态查询与状态详解 select switchover_status from v$database 02,状态转换到备用数据库 alter database commit to ...