在开发过程中，常常会碰到用js改变DOM元素的样式，方法有很多，可以更改元素的class,更改style属性。下面讲讲怎么用原生js获取元素的样式，返回元素当前的所有的css属性对象，即使给元素没有设置任何属性，也会把浏览器默认的样式返回。
1.ele.style.attr
元素.style.属性名
需要把元素的样式写在行内样式中才可以（写在样式表中是获取不到的）；写在样式表中会返回一个null. 而在实际项目中，这种方法不常用，不能为了获取样式而把所有的样式属性写在行内样式中。
2.getComputedStyle()
语法：window.getComputedStyle(obj,伪类)
obj:当前操作的元素对象
伪类：伪类（伪类一般为:after 或者:before ;一般我们不用伪类，,使用null)
getComputerStyle()方法返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式。可以使用style.length获取默认样式的个数。
例如：
var box=document.getElementById('box');
demo = window.getCOmputedStyle(box,null)
//获取节点的宽度width
demo.width
//也可以合并为
boxWidth=window.getComputedStyle(box,null)["width"]**这个方法是FF浏览器和chrome浏览器使用。IE6-8不支持getComputedStyle()方法，需要使用obj.currentStyle。
需要注意的是，即使有些浏览器支持这种功能，但表示值的方式可能会有所区别。例如，Firefox和Safari会返回将所有颜色转换成RGB格式。因此，即使getComputedStyle()方法时，最好多在几种浏览器中测试一下。
3. ele.currentStyle
语法：ele.currentStyle["attr"] 或ele.currentStyle.attr
这个方法只支持IE6-8，不支持FF和chrome.
getComputedStyle()和currentStyle方法的兼容写法：
function getStyle(obj,attr) {
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}这个方法可以应用到实际项目当中去，它兼容IE、FF、chrome。
请看下面更严谨的方法：
/*
curEle:[object] 当前要操作的元素对象
attr:[string] 我们要获取的样式属性的名称
1、使用try、catch来处理兼容（只有在不得已的情况下）
前提:必须保证try中的代码在不兼容的时候报错，这样才可以catch捕获到错误信息,进行其他的处理
不管当前的浏览器是否支持这个方法，都需要把try中的代码执行一遍，如果当前是IE7，window.getComputedStyle不兼容，但是也需要执行一遍再执行catch里面的代码，执行了两遍，消耗性能，
2、判断当前浏览器中是否存在这个属性或者方法，存在就兼容，不存在就不兼容
3、通过检测浏览器版本和类型来处理兼容 window.navigator.userAgent
获取当前浏览器是IE6-8
*/
function getCss(curEle,attr){
var val = null;
//方法2
if("window.getComputedStyle" in window){//或者window.getComputedStyle
var = window.getComputedStyle(curEle,null)[attr];
}else{
var = curEle.currentStyle[attr];
}
//方法1
try{
var = window.getComputedStyle(curEle,null)[attr];
}catch(e){
var = curEle.currentStyle[attr];
}
//方法3
if(/MSIE (6|7|8)/.test(navigator.userAgent)){
var = curEle.currentStyle[attr];
}else{
var = window.getComputedStyle(curEle,null)[attr];
}
return val;
}标准浏览器和IE浏览器获取的结果还是不一样的->对于部分样式属性，不同浏览器获取的结果不一样，主要是由于getComputedStyle和currentStyle在某些方面不一样
对于复合的样式值可以拆开来获取
console.log(getCss(box,"marginTop"))
上面的getCss还没有写完，下面进行第一次升级：把获取的样式值“单位去掉”（只有符合“数字+单位/数字”才可以使用parseFloat）
function getCss(curEle,attr){
var val = null;
var reg = null;
if(/MSIE (6|7|8)/.test(navigator.userAgent)){
var = curEle.currentStyle[attr];
}else{
var = window.getComputedStyle(curEle,null)[attr];
}
reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
return reg.test(val)?parseFloat(val):val; //这样写肯定不行，对于某些样式属性的值是不能获取到的对于opacity这个属性，在IE和其他浏览器中是不一样的；
function getCss(curEle,attr){
var val = null;
var reg = null;
if(/MSIE (6|7|8)/.test(navigator.userAgent)){
if(attr==="opacity"){
val = curEle.currentStyle["filter"];
//把获取到的结果剖析，获取里面的数字，让数字除以100才和标准浏览器保持一致
reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
val = reg.test(val)?reg.exec(val)[1]/100:1
}else{
val = curEle.currentStyle[attr];
}
}else{
//如果传递进来的结果是opacity，说明我想获得的是透明度，但是在IE6-8下获取透明度需要使用filter
val = window.getComputedStyle(curEle,null)[attr];
}
}4.getPropertyValue()
语法： window.getComputedStyle(element, null).getPropertyValue(属性)
var test = document.getElementById('test');
window.getComputedStyle(test, null).getPropertyValue("background-color");**属性名不支持驼峰法，IE6-8不支持该方法，只
5.getAttribute
getAttribute与getPropertyValue类似，有一点的差异是属性名驼峰格式。
var test = document.getElementById('test');
window.getComputedStyle(test, null).getPropertyValue("backgroundColor");**这个方法只支持IE6-8。
