• 关于Chrome(谷歌浏览器)对docume,准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top


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

          document.compatMode正好派上用场,它有两种可能的返回值:BackCompat和CSS1Compat,对其解释如下:

    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。其中前者是怪异模式,后者是标准模式。


    IE默认是BackCompat模式,Gecko内核的浏览器只在table中图片层上不同,可以看为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)

  • 相关阅读:
    SGC强制最低128位加密,公钥支持ECC加密算法的SSL证书
    python学习笔记(一)
    eclipse中启动 Eclipse 弹出“Failed to load the JNI shared library jvm.dll”错误
    外键建立失败
    scala函数式编程(一)
    idea环境下建立maven工程并运行scala程序
    scala中option、None、some对象
    Java与mysql数据库编程中遇见“Before start of result set at com.mysql.jdbc.SQLError.createSQLException” 的解决办法
    hive表的存储路径查找以及表的大小
    red hat7 系统可以ping通ip地址但是不能ping通域名
  • 原文地址:https://www.cnblogs.com/zhaojia-dream/p/3259717.html
Copyright © 2020-2023  润新知