`
liuguofeng
  • 浏览: 450998 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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)

分享到:
评论

相关推荐

    javascript document.compatMode兼容性

    JavaScript中的`document.compatMode`属性是用来检测浏览器当前的渲染模式,这对于处理跨浏览器的兼容性问题至关重要。在网页开发中,浏览器对HTML文档的解析方式有两种:Quirks Mode(怪异模式)和Standards Mode...

    document.compatMode的CSS1compat使用介绍

    `document.compatMode` 是一个在JavaScript中用于检测浏览器渲染页面所使用的渲染模式的属性。这个属性可以帮助开发者了解浏览器是否按照W3C的标准(CSS1Compat)还是非标准(BackCompat,也称为Quirks Mode)来解析...

    document.compatMode介绍

    `document.compatMode` 是一个在JavaScript中用于检测网页渲染模式的属性,对于开发跨浏览器兼容性的Web应用至关重要。它的存在主要是因为不同的浏览器,尤其是Internet Explorer(IE),在处理页面布局和盒模型时...

    火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    首先,我们需要理解`document.body.scrollTop`和`document.documentElement.scrollTop`这两个属性的作用。它们分别表示文档体和整个文档元素的垂直滚动距离。在理想情况下,这两个属性应该返回相同的值,即页面当前...

    取得窗口大小 兼容所有浏览器的js代码.docx

    如果`document.compatMode`为"CSS1Compat",表示页面处于标准模式,那么宽度和高度应该通过`document.documentElement.clientWidth`和`document.documentElement.clientHeight`获取。否则,如果`document.compatMode...

    【JavaScript源代码】JavaScript获取网页的宽高及如何兼容详解.docx

    不过,`document.compatMode` 可以帮助我们判断当前文档是处于标准模式(CSS1Compat)还是怪异模式(BackCompat)。根据这个属性,我们可以编写兼容性代码: ```javascript if (document.compatMode === ...

    由document.body和document.documentElement想到的

    `document.compatMode`是一个经常被忽视但非常有用的属性,它用于指示浏览器当前使用的渲染模式。在Web开发中,有两种主要的渲染模式:Standards Mode(标准模式)和Quirks Mode(怪异模式)。Standards Mode遵循W3C...

    WebRebuild北京第一届交流会之2:《浏览器兼容性问题简介》——黄昊

    开发者可以通过document.compatMode属性来检测当前页面的渲染模式。 DOCTYPE的正确使用对于确保页面在不同浏览器中的渲染一致性至关重要。最常见的是XHTML 1.0 Transitional和HTML5的DOCTYPE声明。例如: ```html ...

    js浮动广告实现

    通过合理运用 `window.pageYOffset`、`document.documentElement.scrollTop` 和 `document.body.scrollTop` 这些关键属性,以及适当的条件判断和逻辑处理,你可以创建出既美观又不影响用户体验的浮动广告。...

    解决多种浏览器获取滚动条高度

    return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body; } // 获取滚动条顶部的位置 function GetScrollTop() { // 对于IE浏览器 if (ie) { ...

    获取鼠标在页面上的位置(包括滚动条)

    else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { point.x = document.documentElement.scrollLeft; point.y = document.documentElement.scrollTop; } // ...

    javascriptDom节点API个人总结.docx

    - **`document.compatMode`** 返回浏览器解析文档时所采用的模式。可能的值包括 `"BackCompat"` 和 `"CSS1Compat"`。 - **`document.cookie`** 提供对 Cookie 的读写操作。用于管理浏览器端的简单数据存储。 #...

    jQuery中使用了document和window哪些属性和方法小结

    document.compatMode 获取当前文档的渲染方式。返回值:BackCompat(怪癖模式)和CSS1Compat(标准模式)。 由于IE 8多达五种渲染模式,所以判断是否是怪癖模式需要借助于IE独有的document.documentMo

    用Javascript 获取页面元素的位置的代码

    if (document.compatMode == "BackCompat") { return { width: document.body.clientWidth, height: document.body.clientHeight }; } else { return { width: document.documentElement.clientWidth, ...

    前端工程师笔试面试题

    9. 浏览器兼容性:浏览器的兼容性是一个重要的问题,需要考虑不同浏览器的差异,例如使用 `document.compatMode` 来判断浏览器的兼容性模式。 本文档涵盖了前端工程师笔试面试题的多个技术领域,包括 HTML、CSS、...

    【JavaScript源代码】JavaScript实现楼层效果.docx

    } else if (document.compatMode === "BackCompat") { width = document.body.clientWidth; height = document.body.clientHeight; } else { width = document.documentElement.clientWidth; height = ...

    【JavaScript源代码】JavaScript实现跟随广告的示例代码.docx

    } else if (document.compatMode === "BackCompat") { width = document.body.clientWidth; height = document.body.clientHeight; } else { width = document.documentElement.clientWidth; height = ...

    jquery 得到当前页面高度和宽度的两个函数

    - **document.compatMode**: 该属性用来判断文档处于何种渲染模式。如果值为 "CSS1Compat",表示文档处于标准兼容模式;如果为 "BackCompat",则处于怪异模式。 - **document.documentElement.clientHeight**: 标准...

    javascript跟随滚动条滚动的层(浮动AD效果)

    } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { posX = document.documentElement.scrollLeft; posY = document.documentElement.scrollTop; } else if ...

Global site tag (gtag.js) - Google Analytics