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

    每一步都是一个深刻的脚印
  • 相关阅读:
    第一次冲刺6
    人机交互课下作业
    第一次冲刺5
    第一次冲刺4
    第一次冲刺3
    第一次冲刺2
    第一次冲刺
    典型用户分析
    掌握 需求过程阅读笔记02
    掌握 需求过程阅读笔记01
  • 原文地址:https://www.cnblogs.com/chzlh/p/8027567.html
Copyright © 2011-2022 走看看