了解document.compatMode属性

这是前端那些事儿看的,我引用过来,方便自己以后翻看,查询

document.compatMode用来判断当前浏览器采用的渲染方式。

官方解释:

BackCompat:标准兼容模式关闭。
CSS1Compat:标准兼容模式开启。

当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;
当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。

浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。

一个准确获取网页客户区的宽高、滚动条宽高、滚动条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;
}

(以上代码兼容目前流行的全部浏览器,包括:IE、Firefox、Safari、Opera、Chrome)

时间: 2024-10-12 20:34:18

了解document.compatMode属性的相关文章

document.compatMode属性和获取鼠标的位置

document.compatMode属性 document.compatMode用来判断当前浏览器采用的渲染方式. 官方解释: BackCompat:标准兼容模式关闭.CSS1Compat:标准兼容模式开启. 当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth:当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientW

document.compatMode属性

document.compatMode用来判断当前浏览器采用的渲染方式. 官方解释: BackCompat:标准兼容模式关闭.CSS1Compat:标准兼容模式开启. 当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth:当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth. 浏览器客户区高度.滚动条高度.滚

javascript document.compatMode属性

文档模式在开发中貌似很少用到,最常见的是就是在获取页面宽高的时候,比如文档宽高,可见区域宽高等. IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode.所以为兼容性考虑,我们可能需要获取当前的文档渲染方式. document.compatMode正好派上用场,它有两种可能的

document对象属性documentMode与CompatMode

DOCTYPE DOCTYPE全称Document Type Declaration(文档类型声明,缩写DTD) DTD的声明影响浏览器对于CSS代码及Javascript脚本的解析. 渲染模式 渲染模式分为混杂模式.接近标准模式和标准模式 除了IE6/7不支持接近标准模式,其他模式所有浏览器都支持: DOCYTPE与渲染模式的关系 1.混杂模式:不写DOCTYPE声明: 2.接近标准模式:过渡型(Transitional)或框架型(Frameset)的HTML声明与过渡型或框架型的XHTML声

关于 document.compatMode

今天查资料时无意发现一个以前没有注意到过的属性:document.compatMode 经过一番资料的查询后,了解到以下信息: 我们都知道IE有两种盒子模型,在不声明 !DOCTYPE 时是混杂模式 (Quirks Mode),在声明了 !DOCTYPE 时与其他标准浏览器一致,是标准模式 (Standards Mode) document.compatMode 有两个属性值: BackCompat ----- 表示标准规范模式关闭,即当前为混杂模式 (Quirks Mode),此时浏览器客户区

document常用属性及属性集合

上一篇博文说删除结点信息时,有一行代码document.body.removeChild(deleteNode),那document.body是什么呢?body跟document什么关系呢?今天说说常用的document属性和集合属性.所谓document属性是指那些单的属性信息,它指代的是单个的对象:集合属性指的是document对象里面的那些可以归为集合的子对象. document.title <html> <head> <title>Attribute</t

document.compatMode,quirks mode and standards mode

Document.compatMode Indicates whether the document is rendered in Quirks mode or Standards mode. SyntaxEDIT mode = document.compatMode ValuesEDIT "BackCompat" if the document is in quirks mode; "CSS1Compat" if the document is in no-qui

document.compatMode

document.compatMode  获得文档模式,IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别 两种模式: 当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth: 当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth. 浏览器客户区高度.滚动条高度.滚动条的Le

artDialog Error: document.compatMode === &quot;BackCompat 报错原因

今天在使用artDialog的时候报错了提示artDialog Error: document.compatMode === "BackCompat 查了网上说 可以设置<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">或者把XHTML4.0换成1.0 但