zoukankan      html  css  js  c++  java
  • document.documentElement和document.body 与document.compatMode的关系

    首先我们看看document.compatMode(兼容模式):

    document.compatMode它有两种可能的返回值:BackCompat和CSS1Compat,

    document.compatMode的使用,感觉这个对于我们开发兼容性的web页面还是很有帮助,我们都知道,IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。所以为兼容性考虑,我们可能需要获取当前的文档渲染方式。

    BackCompat Standards-compliant mode is not switched on. (Quirks Mode)

    CSS1Compat Standards-compliant mode is switched on. (Standards Mode)

    在实际的项目中,我们还需要在获取浏览是否IE,这样就可以得到IE的渲染模式了。在Ext中的代码:isBorderBox=isIE&&!isStrict。

    当文档有了标准声明时, document.compatMode 的值就等于 "CSS1compat", 因此, 我们可以根据 document.compatMode 的值来判断文档是否加了标准声明

    var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
    

    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
    var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
    var startX = 3 //set x offset of bar in pixels
    var startY = 150 //set y offset of bar in pixels
    var verticalpos="fromtop" //enter "fromtop" or "frombottom"
    
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
    }
    
    function get_cookie(Name) {
    var search = Name + "=";
    var returnvalue = "";
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search);
    if (offset != -1) {
    offset += search.length;
    end = document.cookie.indexOf(";", offset);
    if (end == -1) end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end));
    }
    }
    return returnvalue;
    }
    /*-- 
    function hidebar(){
    if (persistclose)
    document.cookie="remainclosed=1";
    document.getElementById("M").style.display="none";
    document.getElementById("show_M").style.display="block";
    }
    function showbar(){
    if(persistclose==0)
    document.cookie="remainclosed=0";
    document.getElementById("M").style.display="block";
    document.getElementById("show_M").style.display="none";
    }
    --*/
    function staticbar(){
    barheight=document.getElementById("float_qq").offsetHeight
    var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
    var d = document;
    function ml(id){
       var el=d.getElementById(id);
       if (!persistclose || persistclose && get_cookie("remainclosed")=="")
       el.style.visibility="visible"
       if(d.layers)el.style=el;
       el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
       el.x = startX;
       if (verticalpos=="fromtop")
       el.y = startY;
       else{
       el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
       el.y -= startY;
       }
       return el;
    }
    window.stayTopLeft=function(){
       if (verticalpos=="fromtop"){
       var pY = ns ? pageYOffset : iecompattest().scrollTop;
       ftlObj.y += (pY + startY - ftlObj.y)/8;
       }
       else{
       var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
       ftlObj.y += (pY - startY - ftlObj.y)/8;
       }
       ftlObj.sP(ftlObj.x, ftlObj.y);
       setTimeout("stayTopLeft()", 10);
    }
    ftlObj = ml("float_qq");
    stayTopLeft();
    }
    
    if (window.addEventListener)
    window.addEventListener("load", staticbar, false);
    else if (window.attachEvent)
    window.attachEvent("onload", staticbar);
    else if (document.getElementById)
    window.onload=staticbar;
    

      

    转自http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html

  • 相关阅读:
    Mysql登录错误:ERROR 1045 (28000): Plugin caching_sha2_password could not be loaded
    Docker配置LNMP环境
    Docker安装mysqli扩展和gd扩展
    Docker常用命令
    Ubuntu常用命令
    单例模式的优缺点和使用场景
    ABP 多租户数据共享
    ABP Core 后台Angular+Ng-Zorro 图片上传
    ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.
    AbpCore 执行迁移文件生成数据库报错 Could not find root folder of the web project!
  • 原文地址:https://www.cnblogs.com/waisonlong/p/4724996.html
Copyright © 2011-2022 走看看