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

    每一步都是一个深刻的脚印
  • 相关阅读:
    java线程的理解
    linux常用命令
    排序算法-(2)-选择排序
    git查看某个文件修改历史
    Information:java: javacTask: 源发行版 1.8 需要目标发行版 1.8
    排序算法-(1)-插入排序
    去重脚本
    771.宝石与石头
    json 的应用
    xml 文件处理
  • 原文地址:https://www.cnblogs.com/chzlh/p/8027567.html
Copyright © 2011-2022 走看看