`
zhangyaochun
  • 浏览: 2621050 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

document.compatMode浅谈动态绑定api

阅读更多

 

document.compatMode返回的值

 

 

  • BackCompat-----------------------Quirks Mode
  • CSS1Compat----------------------Standards Mode (标准兼容模式)

在不声明Doctype的情况下,IE默认是Quirks Mode


1. 当document.compatMode 为BackCompat时,浏览器视觉区域的宽度document.body.clientWidth
2. 当document.compatMode 为Standards Mode时,浏览器视觉区域的宽度document.documentElement.clientWidth

/*
获取页面视觉区域的宽度
思路需要判断当前的document.compatMode
*/
getViewWidth: function(){
         var doc = document,
               client = doc.compatMode == 'BackCompat' ? doc.body : doc.documentElement;
        return client.clientWidth;
}
 

/*
获取页面视觉区域的高度
思路和上面一致
*/
getViewHeight = function(){
     var doc = document,
           client = doc.compatMode == 'BackCompat' ? doc.body : doc.documentElement;
     return client.clientHeight;
}
 
/*
仿照使用$.each----动态绑定 节约复用
*/
$.each(['Width','Height'],function(i,v){
      jQuery.fn['getView'+v] = function(){
                  var doc = document,
                        client = doc.compatMode == 'BackCompat' ? doc.body :                               doc.documentElement;
                  var type = 'client'+v;
                  return client[type];
      }
});
 
2
0
分享到:
评论

相关推荐

    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的问题

    在探讨“火狐、谷歌、IE关于`document.body.scrollTop`和`document.documentElement.scrollTop`以及值为0的问题”这一主题时,我们深入分析了浏览器在处理页面滚动位置时的不同行为,尤其是当滚动位置值始终为0时的...

    由document.body和document.documentElement想到的

    对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途。其实这个对于我们开发兼容性的web页面还是很有帮助,我们都知道,盒模型的渲染在 Standards Mode和Quirks Mode是有很大...

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

    在JavaScript中,获取浏览器窗口的大小是一个常见的需求,这通常涉及到网页的响应式设计或动态布局。`window.innerWidth`和`window.innerHeight`是JavaScript提供的两个内置属性,它们分别用于获取浏览器视口的宽度...

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

    JavaScript 是一种广泛应用于网页开发的脚本语言,它允许开发者在浏览器端动态地操作网页内容。在实际开发中,有时我们需要获取网页的宽度和高度,以便进行布局调整、响应式设计或其他交互效果。本文将详细介绍如何...

    javascriptDom节点API个人总结.docx

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

    js浮动广告实现

    } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { scrollPos = document.documentElement.scrollTop; } else if (typeof document.body != 'undefined') { ...

    javascript弹出带文字信息的提示框效果_.docx

    var iebody = (document.compatMode && document.compatMode != 'BackCompat') ? document.documentElement : document.body; pagex = (isapple == 1 ? 0 : (ie5 ? iebody.scrollLeft : window.pageXOffset)); ...

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

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

    js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动).docx

    _top: expression(eval(document.compatMode && document.compatMode == 'CSS1Compat') ? documentElement.scrollTop + (documentElement.clientHeight - this.offsetHeight) / 2 : document.body.scrollTop + ...

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

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

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

    = “number”){ if(document.compatMode == “number”){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; }else{ pageWidth = document.body.clie

    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, ...

    jquery博客实现底部固定类似人人校内似的

    top: expression(eval(document.compatMode && document.compatMode == 'CSS1Compat') ? document.documentElement.scrollTop + (document.documentElement.clientHeight - this.clientHeight) : document.body....

Global site tag (gtag.js) - Google Analytics