javascript设置、获取样式

---

获取样式函数

function getStyle(el,attr){
  if(el.currentStyle){//兼容IE
    return el.currentStyle[attr];
  }else{
    return getComputedStyle(el,false)[attr];//注意：getComputedStyle不能获取复合样式如background属性值，只能获取单一样式如background-color等
  }
}

设置样式函数

function setStyle(el,obj){
  var cssText = ";";
  for(key in obj){
    cssText += key+':'+obj[key]+';';
  }
  el.style.cssText = cssText
}

 总结

const cssTool = {
  get: function (elem,attr) {
    /**
     * IE78下获取透明度的值
     * @param  elem 获取值的 dom
     * @return {Number} 透明度的值，默认为1
     * IE78下设置透明度 filter: alpha(opacity=0) 取值为0-100
     */
    function getFilter(elem) {
      var _filter = elem.currentStyle.getAttribute('filter').match(/alpha\(opacity=(.*)\)/i);
      var value = parseFloat(_filter[1]);
      if(!isNaN(value)){
        // 转化为0-1
        return value ? value/100 : 0;
      }
      return 1;
    }

    /**
     * 驼峰命名法转换，IE78使用
     * font-size --> fontSize
     * @param {String} attr
     * @return 返回驼峰命名方式的css属性名
     */
    function camelCase (attr){
      return attr.replace(/\-(\w)/g, function (match,originText) {
        return originText.toUpperCase();
      });
    }

    //IE9+
    if(window.getComputedStyle){
      return window.getComputedStyle(elem,null).getPropertyValue(attr);
    } else {//IE678
      // 获取 width 和 height 时的判断条件
      var condition = attr === 'width' || attr === 'height' && elem.currentStyle[attr] === 'auto';
      // IE78兼容
      // 获取浮动使用 styleFloat
      if(attr === 'float'){
        return elem.currentStyle.getAttribute('styleFloat');
      }
      // 获取透明度
      if(attr === 'opacity'){
        return getFilter(elem);
      }
      // 直接获取外部样式表未设置的 width 和 height 返回值为 auto
      // 为了获取精确的 px 值，使用 getBoundingClientRect 方法
      // getBoundingClientRect 可以获得元素四个点相对于文档视图左上角
      // 的 top、left、bottom、right值，进行简单计算即可
      else if(condition){
        var clientRect = elem.getBoundingClientRect();
        return (attr === 'width' ?
                clientRect.right - clientRect.left :
                clientRect.bottom - clientRect.top
            ) + 'px';
      }
      return elem.currentStyle.getAttribute(camelCase(attr));
    }
  },
  set: function (elem, attr, value){
    // IE78 设置透明度需特殊处理
    if(attr === 'opacity'){
      // 针对 IE7 的 hack
      // filter 滤镜要求 hasLayout=true 才能执行
      // IE浏览器且 hasLayout=false 时执行
      if(!!elem.currentStyle && !elem.currentStyle.hasLayout){
        elem.style.zoom = 1;
        attr = 'filter';
        value = 'alpha(opacity=' + value * 100 + ')';
      }
    }
    elem.style.cssText += ';' + (attr + ':' + value) + ';';
  }
};