zoukankan      html  css  js  c++  java
  • WEB开发兼容性---浏览器渲染模式—— document.compatMode

     document.compatMode主要是用来判断浏览器采用何种方式渲染,它有两种可能的返回值:BackCompatCSS1Compat,官方对其解释如下:

    BackCompat:标准兼容模式关闭,向后兼容模式。
    CSS1Compat:标准兼容模式开启。
    当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;
    当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。
    浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。

    一个准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码:

     1 if (document.compatMode == "BackCompat") {
     2         cWidth = document.body.clientWidth;
     3         cHeight = document.body.clientHeight;
     4         sWidth = document.body.scrollWidth;
     5         sHeight = document.body.scrollHeight;
     6         sLeft = document.body.scrollLeft;
     7         sTop = document.body.scrollTop;
     8 }
     9 else { 
    10         //document.compatMode == "CSS1Compat"
    11         cWidth = document.documentElement.clientWidth;
    12         cHeight = document.documentElement.clientHeight;
    13         sWidth = document.documentElement.scrollWidth;
    14         sHeight = document.documentElement.scrollHeight;
    15         sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
    16         sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
    17 }

    (以上代码兼容目前流行的全部浏览器,包括:IE、Firefox、Safari、Opera、Chrome)

    认真是一种态度。。。求知若饥,虚怀若愚
  • 相关阅读:
    记 · 佛系青年 · 嗯我百度了下
    【CSS】452- 浏览器解析 CSS 样式的过程
    记 · 平安夜 · 平安平安平安
    【Vuejs】451- Vue CLI 首屏优化技巧
    【网站发布】前端自习课
    【CSS】450- 温故而知我不懂的CSS
    【CSS】449- CSS第四级选择器
    RabbitDemo —— Topic
    RabbitDemo —— Fanout
    RabbitDemo —— Direct
  • 原文地址:https://www.cnblogs.com/web-wjg/p/7136873.html
Copyright © 2011-2022 走看看