JavaScript获取和设置CSS样式属性值

JavaScript获取，设置CSS属性值

1. getCSS方法获取元素样式值

var flag = "getComputedStyle" in window; // 判断是否为IE浏览器

function getCSS(curEle, attr) {
  var val = null, reg = null;
  if (flag) {
    val = window.getComputedStyle(curEle, null)[attr];
  } else {
    val = curEle.currentStyle[attr];
  }
  reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i; // 正则匹配单位
  return reg.test(val) ? parseFloat(val) : val;
}

2.setCSS方法设置样式属性

function setCSS(curEle, attr, value) {
  // js设置float需要兼容
  if (attr === "float") {
    curEle['style']["cssFloat"] = value;
    curEle['style']["styleFloat"] = value;
    return;
  }

  // 透明度，需要兼容
  if (attr === "opacity") {
    curEle['style']["opacity"] = value;
    curEle['style']["filter"] = "alpha(opacity=" + value * 100 + ")";
    return;
  }

  // 部分属性补充单位
  var reg = /^(width|height|top|right|left|bottom|((margin|padding)(Top|Right|Bottom|Left)?))$/;
  if (reg.test(attr)) {
    if (!isNaN(value)) { // 判断是不是不带单位
      value += "px";
    }
  }
  curEle['style'][attr] = value;
}

3.setGroupCss方法批量设置样式属性

function setGroupCss(curEle, options) {
  // 如果不是对象，就不进行批量设置
  options = options || 0; // 不传值就设为0，下一步判断会return
  if (options.toString() !== "[object Object]") {
    return;
  }
  for (var key in options) {
    if (options.hasOwnProperty(key)) {
      setCSS(curEle, key, options[key]);
    }
  }
}

4.css 融合上面三个方法，可获取、单独设置、批量设置元素样式值

function css(curEle) {
  var arr = Array.prototype.slice.call(arguments,1);
  var argTwo = arguments[1];
  if (typeof argTwo === 'string') { // 第二个参数是一个字符串，可能是获取元素值，如果第三个参数值存在，就是设置样式
    if (typeof arguments[2] === 'undefined') {
      return getCSS.apply(curEle, arr); // 没有第三个元素，就是获取元素值
    }
    setCSS.apply(curEle, arr); // 有第三个参数，设置仰视着
  }
  argTwo = argTwo || 0;
  if (argTwo.toString() === '[object Object]') { // 第三个参数传入的是对象，批量设置样式属性值
    setGroupCss.apply(curEle, arr);
  }
}