• 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];
    }

    每一步都是一个深刻的脚印
  • 相关阅读:
    Vue路由跳转时修改页面标题
    Vue整合Quill富文本编辑器
    XML中的转义字符
    整合SSM框架环境搭建
    Android搞定权限申请
    Android实现秒开效果
    tail -f 与tail -F的区别
    druid 启动报错
    sqoop flume学习笔记
    20180911
  • 原文地址:https://www.cnblogs.com/chzlh/p/8027567.html
Copyright © 2020-2023  润新知