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

快来打我* 2022-05-11 00:54 460阅读 0赞

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

但是，这并不是最优的方式。我们知道我们的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元素都可使用这个对象。

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle