• JS判断doctype文档模式-document.compatMode


    IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。所以为兼容性考虑,我们可能需要获取当前的文档渲染方式。
    document.compatMode正好派上用场,它有两种可能的返回值:BackCompat和CSS1Compat。
    BackCompat:标准兼容模式关闭。浏览器客户区宽度是document.body.clientWidth;
    CSS1Compat:标准兼容模式开启。 浏览器客户区宽度是document.documentElement.clientWidth。
    那么写了个准确获取网页客户区的宽高、滚动条宽高、滚动条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;
    }

    本文所说的“浏览器窗口中文档(下面简称“视口”)可用尺寸”指浏览器中文档显示区域的尺寸,不包括标题栏、工具栏、滚动条等内容。
    在处理这一信息时,不同浏览器和同一浏览器不同版本中有一些差别,说明如下:
    (1)在 IE4、IE5 和 没有声明 DOCTYPE 的 IE6 中,视口的这一信息保存在“body”元素中,可以用 document.body.offsetWidth / offsetHeight 获取,
    (2)在声明了DOCTYPE 的 IE6 中 ,视口的这一信息保存在 document.documentElement 中,可以用 document.documentElement.clientWidth / clientHeight 获取。
    (3)除了 IE 以外的所有浏览器都将此信息保存在 window 对象中,可以用 window.innerWidth / innerHeight 获取

  • 相关阅读:
    PHP面向对象(一)
    Linux(九)LNMP环境Nginx服务器
    Linux(八)Apache服务器
    [转]PHP高手干货分享:不能不看的50个细节!
    Linux(七)LAMP环境搭建
    Linux(六)Samba服务器与防火墙
    Linux(五)服务和进程管理
    Linux(四)用户和用户组管理
    Linux(三)安装包
    Linux(二)Linux常用命令
  • 原文地址:https://www.cnblogs.com/human/p/3306636.html
Copyright © 2020-2023  润新知