那些年我封装的 JS 函数

  1. 给标签增添或移出类名

一定有人会说,增加类名可以用obj.classList.add呀,是的,这没有错。但我也说了,这些我积聚的函数都是兼容性极佳的体式格局,也就是说,不管是 ie 的多低版本,也是没多大题目的,而且这些本身完成的功用确切对初学者协助不少。

function addClass(ele, className){
    var reg = new RegExp("\\b"+className+"\\b");
    if(!reg.test(ele.className)){
        /* 假如元素 ele 不包括 className */
        ele.className += " "+className;
    };
};

function removeClass(ele, className){
    if(ele.className){
        var reg = new RegExp("\\b"+className+"\\b");
        var classes = ele.className;
        ele.className = classes.replace(reg, "");
        if(/^\s*$/g.test(ele.className)){
            ele.removeAttribute("class");
        };
    }else{
        ele.removeAttribute("class");
    }
};

2.滚轮事宜

滚轮事宜也是 PC 端主流网站必需完成的功用,一般我们会合营我们本身写的滚动条制止掉体系的滚动条来运用。然则,滚轮事宜跟我们设想的略有不同,它是 firefox 一种绑定,反而 ie 和 chrome 是一样的。

window.onload = function () {

  //ie/chrome
  document.onmousewheel = function(event){
      scrollMove(event,callback)
  }
  //firefox
  if(document.addEventListener){
    document.addEventListener('DOMMouseScroll',function(event){
        scrollMove(event,callback)
    });
  }

  function scrollMove(event,callback) {
    event = event || window.event;
    var flag = '';
    if(event.wheelDelta){
      //ie/chrome
      if(event.wheelDelta > 0){
        //上
        flag = 'up';
      }else {
        //下
        flag = 'down'
      }
    }else if(event.detail){
      //firefox
      if(event.detail < 0){
        //上
        flag = 'up';
      }else {
        //下
        flag = 'down'
      }
    }

    switch (flag){
      case 'up':
        if (callback && callback['wheelUp'] == 'function') {
            callback.wheelUp()
        }          
        break;
      case 'down':
        
        break;
    }

    //作废默许行动
    event.preventDefault && event.preventDefault();
    return false;
  }

};


未完待续 , 有时间就更新



    原文作者:天才樱木花道
    原文地址: https://segmentfault.com/a/1190000017257632
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞