使用原生获取DOM元素的样式

我们在日常的工作场景下会遇到需要修改页面元素的样式问题，特别是使用原生js获取元素的样式，如果只是获取在元素的内联样式，可以通过Element.getAttribute(attr)来获取元素的属性，但是如果获取的是DOM元素的css样式表哪？
这也是有办法的我们可以通过[getComputedStyle]进行获取，具体的可以点击这里 来看。
为了保持兼容性(ie)我们还要使用currentStyle对象进行兼容。我们可以使用以下的方式来获取这样的属性值

            	function getElemStyle (elem, attr) {
            		// 保证elem是dom节点
            		if (!elem || !elem.nodeType || elem.nodeType !== 1) {
            			return;
            		}
            		if (document.currentStyle) {
            			return elem.currentStyle[attr];
            		} else {
            			return window.getComputedStyle(elem, null)[attr];
            		}
            	}
          

但是，这并不是最优的方式。我们知道我们的DOM操作方法上的继承自HTMLElement，而HTMLElement继承自Element，所以我们可以直接在Element上加方法。这样做的好处是，我们可以再任何地方随时的使用这个方法，不必每次获取元素再调用上面的方法。我的代码如下所示：

function getElemStyle() {
    Element.prototype.getStyle = function(attr) {
        if (this.currentStyle) {
            return this.currentStyle[attr];
        } else {
            return window.getComputedStyle(this, null)[attr];
        }
    }
}

这需要执行一次这个代码，当前页面的所有DOM元素都可使用这个对象。