js常用的函数的封装

封装获取元素样式

function getStyle(ele,style){
    try{
        return window.getComputedStyle(ele)[style];
    } catch(error){
        return ele.currentStyle[style];
       }
}

• window.getComputedStyle(ele,参数)[style]
  高版本ie浏览器,和谷歌等主流浏览器能使用
  1.参数默认为null，当不写参数时,可以获取到除了伪类的所有样式,是一个实时的对象，当元素的样式更改时，它会自动更新本身。
  ele.style只能获取到元素的行内样式，并不能获取到元素的内部和外部样式
  2。与伪类的使用

window.getCOmputedStyle(ele,'after')[样式名]

• ele.currentStyle[style] 可以兼容ie8以下的浏览器

封装一个简单的运动函数

  function move(ele,dir,target){
    let timer;
    // 获取到元素原本的样式值，获取到的带px单位字符串，需要转为数值，parseInt()
    let curStyle = parseInt(getStyle(ele,attr));//getStyle是上面封装的获取样式
    // console.log(curStyle);
    // 使用定时器，让元素的指定样式，(慢慢的到达目标值)
    timer = setInterval(()=>{
      // 每隔一段时间，给当前值加 2px
      curStyle += 2;
      // curStyle变量的值达到目标值target，就停止
      if(curStyle>=target){
        // 达到了目标值,将目标值给到curStyle
        curStyle = target;
        // 清除定时器，停止
        clearInterval(timer);
      }
      // 将变化后的curStyle的值给到运动的元素
      ele.style[attr] = curStyle + 'px';
    },1);
  }