javascript document.compatMode属性

文档模式在开发中貌似很少用到,最常见的是就是在获取页面宽高的时候,比如文档宽高,可见区域宽高等。

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;
} 
时间: 2024-08-18 19:48:14

javascript document.compatMode属性的相关文章

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

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

JavaScript - document对象属性和方法

document对象的属性和方法 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test10.html</title> <script type="text/javascript"> //document对象的属性 /*alert(document.referrer); a

document.compatMode属性

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

了解document.compatMode属性

这是前端那些事儿看的,我引用过来,方便自己以后翻看,查询 document.compatMode用来判断当前浏览器采用的渲染方式. 官方解释: BackCompat:标准兼容模式关闭.CSS1Compat:标准兼容模式开启. 当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth:当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.

document对象属性documentMode与CompatMode

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

JavaScript document属性和方法

JavaScript document属性和方法 --------------------------------------------属性: 1. Attributes     存储节点的属性列表(只读) 2. childNodes     存储节点的子节点列表(只读) 3 .dataType     返回此节点的数据类型 4. Definition     以DTD或XML模式给出的节点的定义(只读) 5. Doctype     指定文档类型节点(只读) 6 .documentEleme

javascript:document的属性和方法,title,innerHTML,

document.titile="简介";  //修改文档的标题为"简介" document.body.innerHTML="<p>document的属性和方法</p>";  //修改文档的内容为"简介"

JavaScript document 对象

1.document属性 cookie -- 用户cookie title -- 当前页面title标签中定义的文字 URL -- 当前页面的URL document代表HTML文档的内容,因此可以通过它表示文档中加载的一些元素,这些元素全部通过集合访问. anchors -- 文档中所有锚(a name="aname")的集合 applets -- 文档中所有applet标签表示的内容的集合 embeds -- 文档中所有embed标签表示的内容的集合 forms -- 文档中所有f

javascript中对象属性的介绍

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> // 对象的属性是什么类型的? string // 如果对象的属性不是字符