JS获取元素样式之style、currentStyle、getComputedStyle

在js中获取元素的样式属性大多都是用ele.style.attr这种方式，但是这种方式是有局限性的，该方法只能获取到行内样式，获取不了外部样式。
如果要想获取元素的外部样式，可以选用currentStyle属性和getComputedStyle属性，但这两个属性不能设置样式,只能获取样式，而且这两个属性有其兼容性，具体来说：
currentStyle属性
用法：ele.currentStyle["attr"]或 ele.currentStyle.attr；
特点：该属性只兼容IE,不兼容火狐和谷歌
getComputedStyle属性
用法：window.getComputedStyle(ele,null)[attr] 或 window.getComputedStyle(ele,null).attr
（两个参数，元素和伪类。第二个参数不是必须的，当不查询伪类元素的时候可以忽略或者传入 null）
特点：该属性是兼容火狐谷歌,不兼容IE8及以下（IE9及以上版本可兼容）
基于此，我们可以写一个兼容性的方法来获取元素样式：

function getCss(element, attr) {
   if (window.getComputedStyle) {
    return attr?window.getComputedStyle(element, null)[attr]:window.getComputedStyle(element, null);
   }
  return attr?element.currentStyle[attr]:element.currentStyle;
}

var oBox = document.getElementById("box");
getCss(oBox,"font-size");

style,currentStyle和getComputedStyle的区别

操作	特点
style	1.各大浏览器都兼容,能设置样式和获取样式； 2.获取不了外部样式,如果写了行内没有的样式,返回的是空值
currentStyle	1.该属性只兼容IE,不兼容火狐和谷歌； 2.该属性不能设置样式,只能获取样式
getComputedStyle	1.该属性是兼容火狐谷歌,不兼容IE8及以下（IE9及以上版本可兼容）； 2.该属性不能设置样式,只能获取样式