js中获取css中的样式方法：style，currentStyle，getComputedStyle

用js来获取或者设置css相关样式，是很常见的需求，下面将对比一下js中的各个方法；

1，style

var obj = document.getElementById('box');
    console.log(obj.style.width);
    obj.style.width = '50px';

    ele.style[attr]
    ele.style.attr

style可以设置也可以获取，各浏览器都兼容，但只能获取行内样式，如果想要获取获取内部样式和外部样式，需要使用：currentStyle，或者getComputedStyle

 

2,currentStyle  getComputedStyle

currentStyle和getComputedStyle只能用于获取值，不能设置值

currentStyle用法：（兼容IE）

ele.currentStyle.attr
ele.currentStyle[attr]

getComputedStyle用法：（兼容火狐和谷歌）

window.getComputedStyle(ele,null)[attr]
window.getComputedStyle(ele,null).attr

下面是获取css样式的兼容方法：

function getStyle(obj,attr) {
      if (window.getComputedStyle) {
        return window.getComputedStyle(obj,null)[attr];
      } else {
        return obj.currentStyle[attr]
      }
    }

或者更加简写：

function getStyle2(obj,attr) {
      return obj.currentStyle ? obj.currentStyle[attr] : window.getComputedStyle(obj,null)[attr];
    }

注意：通过上面方法获取到的值是带参数的，要使用parseInt或者parseFloat来转成数值；