zoukankan      html  css  js  c++  java
  • 关于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)

  • 相关阅读:
    OpenCV4【6】-改变颜色空间
    OpenCV4【5】-图像基本运算
    OpenCV4【4】- 图像基本操作
    OpenCV4【3】- GUI特性:轨迹栏作为调色板
    OpenCV4 【2】- GUI特性 :绘图功能 与 鼠标事件
    OpenCV4【1】- 入门用法
    numpy
    可变对象 及其 作为 函数参数 的注意点
    关于m个苹果每天吃一个或者两个,有几种吃法
    kali之win10 linux子系统环境变量冲突解决办法
  • 原文地址:https://www.cnblogs.com/zhaojia-dream/p/3259717.html
Copyright © 2011-2022 走看看