JavaScript中style, currentStyle和 getComputedStyle的异同

Posted 2020-08-21 智轩资本

　　今天在做项目的时候，习惯性的用到了element.style.width，然而浏览器却报错，错误提示是style is undefined,这是我才意识到，内联样式表和外联样式表在js应用中也有很大的不同！

　　首先样式表有三种，外联样式，内联样式，行间样式，element.style.attr只有在attr定义在行间样式时才生效，因此替代方案，currentStyle和getComputedStyle出现了。

　　currentStyle是由微软提出来的，目的就是为了返回当前元素应用的属性，不管是外联还是内联还是内嵌，只取当前应用的元素，这个方法虽然能够很好的取到当前的attr的值，然而很遗憾，只有IE支持这个属性！

　　当然其他浏览器也不是吃素的，为了能够取到attr当前的值，他们提出了getComputedStyle,这是window对象的一个方法！Window.getComputedStyle()方法得出所有在应用有效的样式和分解任何可能会包含值的基础计算后的元素的CSS属性值。目前兼容IE9+和其他主流浏览器！

　　我们可以写一个兼容ie和其他浏览器的获取元素style的函数，代码如下：

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