框架:document.compatMode

2016-02-20 00:58 2 1 收藏

下面图老师小编要向大家介绍下框架:document.compatMode,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - Web开发 】

今天在看框架的时候无意间看到了document.compatMode,经过一番资料查找,终于搞懂了。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

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

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;
}

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

来源:https://www.tulaoshi.com/n/20160220/1632929.html

延伸阅读
标签: Web开发
Demonstration script that displays formatted data in a Microsoft Word document.  代码如下: Set objWord = CreateObject("Word.Application") objWord.Visible = True Set objDoc = objWord.Documents.Add() Set objSelection...
标签: Web开发
Demonstration script that adds a picture (C:\Scripts\Logo.jog) to  a Microsoft Word document 代码如下: Set objWord = CreateObject("Word.Application") objWord.Visible = True Set objDoc = objWord.Documents.Add() Set o...
标签: Web开发
[document对象] 该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。 属性 alinkColor 活动链接的颜色(ALINK) anchor 一个HTMI锚点,使用A NAME=标记创建(该属性本身也是一个对象) anchors array 列出文档锚点对象的数组(A NAME=)(该属性本身也是一个对象) bgColor 文档的背景颜色(BGCOLOR)...
标签: Web开发
使用JavaScript框架 在讲述 window 对象的时候,我们提到过,一个框架内的网页也是 window 对象,也就是说,Frame 对象也是 window 对象。用最容易理解的话说,每一个 HTML 文件占用一个 window 对象,包括定义框架的网页(“框架网页”)。在 IE 里用“iframe”标记在...
标签: Web开发
Document文档对象是JavaScript中window和frames对象的一个属性,是显示于窗口或框架内的一个文档。描述当前窗口或指定窗口对象的文档。它包含了文档从head到/body的内容。 用法:document (当前窗口) 或 窗口对象.document (指定窗口) 属性: document.title //设置文档标题等价于HTML的title标签 documen...

经验教程

143

收藏

76

精华推荐

document.onLoad的触发时间

document.onLoad的触发时间

水耀0414

超清晰的document对象详解

超清晰的document对象详解

yangchen0469

XMLDOM对象方法:Document对象方法

XMLDOM对象方法:Document对象方法

邦迪windy

微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部