js获取css样式三种方法

[liukexina]

1. style

针对css样式里background-color\margin-left之类的短杠相接的属性名称，在使用style属性获取设置样式的时候名称要改为驼峰式，如ele.style.backgroundColor

style方法只能获取元素的内联样式，对于内部样式和外联样式，这种方法则不能取得，这时就要使用其他方法进行获取，而在这种情况下进行样式获取时，不同的浏览器又有不同的处理方式（主要是ie和非ie）。

2. currentStyle（IE）

   var oDiv = document.getElementById('div');
   var styles = oDiv.currentStyle;
   styles.width;

3. getComputedStyle（非IE）

   var oDiv = document.getElementById('div');
   var style = window.getComputedStyle(oDiv, null);
   styles.width;

   封装方法：

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

   注意：

   • 后两个方法需要传两个参数，obj是将要获取样式的元素，attr则是样式的属性，如width、color等，调用此方法时attr必须要加上引号，不然会报错；
   • 此方法只能获取单一属性样式，像border、background等具有综合属性的样式，只有chrome浏览器能获取；而其他浏览器只能通过borderStyleColor这种驼峰命名的单一属性来取得