通过Javascript 对 CSS属性的设置 与 获取

通过document.getElementById('someid).style 类似这种的obj.sytle获取的是 元素的内联样式，如果没有通过内嵌在标签里面（如: style="font-size:20px;"） 读取到的结果是空的！它只认标签里的style="key:value"给定的CSS属性

那我们能怎么获取CSS的样式值/结果呢？

解决方式1：

.size {
        font-size: 20px;
}

  

<h2>normal size <i id="i2"></i></h2>
<section id="section2">
    <div class="size">ABCDEFGHIJKLMN</div>
    <div class="size">一二三四五六七八九十零</div>
</section>

var i2 = document.querySelector('#i2'),
    s2 = document.querySelector('#section2');

i2.innerHTML = s2.querySelector('div').style.fontSize;

var obj2 = s2.querySelectorAll('div')[0];
i2.innerHTML = '[font-size:' + new mCss(obj2).GetCss('fontSize') + ']';

function mCss(obj){
    this.obj = obj;
}
mCss.prototype.GetCss = function(key){
    if(typeof this.obj.currentStyle!='undefined'){
      return this.obj.currentStyle[key];//IE
    }
    else {
      return parseFloat(getComputedStyle(this.obj)[key]);
    }
}

注：

FireFox 中获取margin、padding属性 必需通过margin-top、margin-right、margin-bottom、margin-left; 或 padding-top、padding-right、padding-bottom、padding-left;指定具体属性获取. 但是在IE和Chrome中则可以直接通过margin、padding获取到. 

还有获取颜色时，只有IE返回的是如‘red’这类的标识符，而FF和Chrome返回颜色的RGB值。

解决方式2：可设置 或 获取常用的CSS属性

设置CSS：hCSS( element, attr, val)

获取CSS：hCSS( element, attr)

function hCss(element, attr , val){
  if(attr=='scale'|| attr=='rotate'|| attr=='rotateX'|| attr=='rotateY'|| attr=='rotateZ'|| attr=='scaleX'|| attr=='scaleY'|| attr=='translateY'|| attr=='translateX'|| attr=='translateZ' || attr=='skewX' || attr=='skewY'||attr=='skewZ'){
    return setTransform(element, attr , val);
  }
  if(arguments.length == 2){
    var val = element.currentStyle?element.currentStyle[attr]:getComputedStyle(element)[attr];
    if(attr=='opacity'){
      val = Math.round(val*100);
    }
    return parseFloat(val);
  } else {
    switch(attr){
      case 'width':case 'height':case 'paddingLeft':case 'paddingTop':case 'paddingRight':case 'paddingBottom':case 'borderWidth':case 'borderLeftWidth':case 'borderRightWidth':	case 'borderTopWidth':	case 'borderBottomWidth':
	val = val < 0 ? 0 : val;
      case 'left':case 'top':case 'marginLeft':case 'marginTop':case 'marginRight':case 'marginBottom':
	element.style[attr] = val +"px";
	break;
      case 'opacity':
	element.style.filter= "alpha(opacity:"+val+")";
	element.style.opacity= val/100;
	break;	
      default:
	element.style[attr]=val;	
    }
  }
}
function setTransform(element,attr,val){
  if(!element["transform"]){
    element["transform"] = {};
  }
  if(typeof val == "undefined"){
    val = element["transform"][attr];
    if(typeof val=="undefined"){
      val = 0;
      element["transform"][attr] = 0;
    }
    return parseFloat(val);
  } else {
    var str = "";
    element["transform"][attr] = val;
    for(var s in element["transform"])	 {
      switch(s){
        case 'skewX':case 'skewY':case 'skewZ':case 'rotate':case 'rotateX':case 'rotateY':case 'rotateZ':
	  str += s+"("+element["transform"][s]+"deg) ";
	  break;
	case 'translateX':case 'translateY':case 'translateZ':	
	  str += s+"("+element["transform"][s]+"px) ";
	  break;
        default:
	  str += s+"("+element["transform"][s]/100+") ";
      }
    }
    element.style.MozTransform = element.style.msTransform  = element.style.WebkitTransform = element.style.transform = str;
  }
}