zoukankan      html  css  js  c++  java
  • clientTop,scrollTop,兼容

    在开发中常见的额兼容性问题:

    scrollTop问题:

    function scroll() { // 开始封装自己的scrollTop
      if(window.pageYOffset != null) { // ie9+ 高版本浏览器
        // 因为 window.pageYOffset 默认的是 0 所以这里需要判断
        return {
          left: window.pageXOffset,
          top: window.pageYOffset
        }
      }else if(document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD
        return {
          left: document.documentElement.scrollLeft,
           top: document.documentElement.scrollTop
        }
      }
        return { // 未声明 DTD
          left: document.body.scrollLeft,
          top: document.body.scrollTop
         }
    }

    clientTop,clientLeft

    /获取屏幕可视区域的宽高
    function client(){
      if(window.innerHeight !== undefined){
        return {
          "width": window.innerWidth,
          "height": window.innerHeight
        }
      }else if(document.compatMode === "CSS1Compat"){
        return {
          "width": document.documentElement.clientWidth,
          "height": document.documentElement.clientHeight
        }
      }else{
        return {
          "width": document.body.clientWidth,
          "height": document.body.clientHeight
        }
      }
    }

    /**
    * 获取元素样式兼容写法
    * @param ele
    * @param attr
    * @returns {*}
    */
    function getStyle(ele,attr){
      if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)[attr];
      }
      return ele.currentStyle[attr];
    }

    每一步都是一个深刻的脚印
  • 相关阅读:
    T100——MENU按钮
    vue 打包问题
    Python: 什么是*args和**kwargs
    windows服务器下部署Apache+Flask+Mod_wsgi+Vue
    树莓派 端口被占用的解决方案
    mac 终端命令总结
    Home Assistant 发现小米设备
    树莓派基于Home Assistant 查询在网设备
    Linux 命令集合-vim
    mac上的hassbian 启动报错1
  • 原文地址:https://www.cnblogs.com/chzlh/p/8027567.html
Copyright © 2011-2022 走看看