zoukankan      html  css  js  c++  java
  • 标准模式和混杂模式下浏览器的可视区域的宽高问题

    利用document.compatMode可以用来判断浏览器的模式是标准模式还是混杂模式,

    (1)       CSS1Compat表示的是标准模式

    (2)       BackCompat表示的是混杂模式

    不同的模式获取宽高的方式是不一样的,为了兼容一般要么对浏览器的工作模式加以判断严要么则是利用利用||运算兼容

    标准模式:

    document.documentElement.clientHeight
    document.documentElement.clientWidth//浏览器可是区域的宽高
    document.documentElement.scrollTop
    document.documentElement.scrollLeft//浏览器滚轴滚动的距离

    混杂模式:不写DOCTYPE的声明

      document.body.clientHeight
      document.body. clientWidth//浏览器可是区域的宽高
    document. body.scrollTop
    document. body.scrollLeft//浏览器滚轴滚动的距离

    同时除了IE 8 及 更早 IE 版本不支持该属性,所有其他的主流浏览器均将信息放入到window上,支持一下方式属性

    window.innerHeight
    window.innerWidth//浏览器可是区域的宽高
    window.pageXOffset
    window.pageYOffset//浏览器滚轴滚动的距离

    在主流浏览器中可以直接使用Window的范式获取相关的宽高

    offsetWidth:元素自身的宽度包括width+border+padding不包含margin的值

    offsetHeight:同理

    offsetLeft:元素左侧相对于其父元素的左内边距的距离

    offsetTop:同理两者均包含元素自身的margin

  • 相关阅读:
    Oracle expdp impdp中 exclude/include 的使用
    Oracle表空间迁移Move Tablespace
    m2ewtp的作用
    有意思的排序算法合并排序
    有意思的排序算法插入排序
    equals与“==”之惑
    简化的打印语句静态导入
    有意思的排序算法堆排序
    博客开篇语
    MySQL 整理笔记 张大哥
  • 原文地址:https://www.cnblogs.com/heshan1992/p/6735751.html
Copyright © 2011-2022 走看看