javascritp原生CSS封装函数

jQuery中css()使用起来是比较方便的，它即可以获取又可以设置选择元素的样式属性值

css("width")获得元素的属性值
css("width","100px")设置元素的属性值

今天来探讨一下原生态的js是如何封装css函数,此封装的函数可获得可设置样式属性值

function css(object,attribute,value){
   if(!value){
       if(object.currentStyle){
	 return parseInt(object.currentStyle[attribute]);
       }else{
	 return parseInt(getComputedStyle(object,false)[attribute]);
       }
    }else{
	 object.style[attribute] = value + 'px';
    }		
}

一般我们获得元素的style属性值是通过element.style.attrbute来获得的，但问题在其只能获得行间样式，而无法获得非行间样式。何谓行间样式？何谓非行间样式？看了下面的代码你会明白了，行间样式就是直接定义在标签元素里面的样式，非行间样式则是直接在css文件里面定义的，这不是我们期望的，我们不可能把所有样式都写在标签元素上面。

<div style="width:100px;"></div>//行间样式
.wrap{width:100px;}//非行间样式

可以通过currentStyle来获取元素的非行间样式属性值，但此属性仅限于IE浏览器，其它webkit内核的浏览器是无法识别的，webkit浏览器则是通过getComputedStyle(object,para).attrbute实现的。通过他们的差别我们可以实现对所有浏览器的兼容，如下代码所示：

if(object.currentStyle){//IE浏览器
    return parseInt(object.currentStyle[attr]);
 }else{//webkit浏览器
   return parseInt(getComputedStyle(object,false)[attr]);
}

有几点需要注意：
1、object.style.width仅限于单一参数，object.style['width']中的[]可以动态的传参
2、parseInt()将获得的字符串转换为数字，便于后面对于数值的操作
3、return 返回数值
4、getComputedStyle(object,false)里必须设置两个参数，object为获取样式的元素对象，后面的false参数其官网解释说是一个虚拟参数，其实将false设置成什么都可以，但必须要有此参数，否则报错。
上面的代码实现了获取元素的计算后的样式值了，如果给一个元素赋值相信你不会陌生

object.style[attribute] = value + 'px'//注意加'px'前面使用parseInt()将获得的px过滤掉了

获取与赋值代码都齐了，在什么情况下获取属性值？又在什么情况下赋属性值那？其实仔细分析就可以发现，赋值包括三个动参[object]操控的元素对象、[attribute]设置属性、[value]设置的属性值，获取包括二个[object]操控的元素对象、[attribute]设置属性
也就是赋值有3个动参，获取值有2个动参。我们可以通过参数的差别进行if条件的判断

if(arguments.length == 2){//还可以使用判断!value是否存在进行条件判断
   //返回数值
}else{
   //赋值
}

完整代码如下：

function css(object,attribute,value){
   if(!value){
       if(object.currentStyle){
	 return parseInt(object.currentStyle[attribute]);
       }else{
	 return parseInt(getComputedStyle(object,false)[attribute]);
       }
    }else{
	 object.style[attribute] = value + 'px';
    }		
}

简化代码：

function css(object,attribute,value){
   if(!value){
       if(object.currentStyle){
	   return parseInt(object.currentStyle[attribute]);
       }
	   return parseInt(getComputedStyle(object,false)[attribute]);
    }
   object.style[attribute] = value + 'px';
}