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

  • 相关阅读:
    Codeforces Round #485 (Div. 2) C题求三元组(思维)
    MongoDB设置访问权限、设置用户
    与MySQL交互(felixge/node-mysql)
    centos Supervisor
    Async详解之一:流程控制
    C# Socket连接请求超时机制
    tcp-client-c++
    C#TCPClient应用-一个简单的消息发送和接收
    centos下各种c++库文件的安装
    AngularJS与RequireJS集成方案
  • 原文地址:https://www.cnblogs.com/heshan1992/p/6735751.html
Copyright © 2011-2022 走看看