JavaScript中Style与CurrentStyle对象的区别及兼容处理

作者：竹影

时间：2026-10-24

本文详细解析JavaScript中style对象与currentStyle对象的用法及区别。style对象仅获取内联样式，而currentStyle或getComputedStyle返回经过层叠计算后的最终样式。文章提供了获取元素样式的代码示例，并重点介绍了IE与其他浏览器在获取计算样式时的兼容处理方案，帮助开发者准确获取CSS属性值。

文章目录

1、Style对象

style对象代表一个单独的样式声明，可以通过文档元素直接访问该对象。它主要用于获取内联样式，即HTML标签中style属性所定义的具体值。

示例：


<style type="text/css">#div{color:gray;}</div>//内部样式
<div id="div" style="color:red;"></div>//内联样式
document.getElementById('id').style.color;//值为red

2、currentStyle对象

该对象用于返回作用于元素的所有样式声明（涵盖内部样式、外部样式表及内联样式）经过CSS层叠规则计算后的最终结果。目前，只有IE和Opera浏览器原生支持通过currentStyle获取元素计算后的样式。对于其他浏览器，可以使用getComputedStyle()方法来获取当前元素应用的CSS属性值。


var div=window.getComputeStyle("div",null).color;//第一个参数为目标元素，第二个参数为伪类（必需，没有伪类设为null）

与style对象的主要区别如下：

getComputedStyle()返回的对象是只读的，仅支持读取属性值，不支持直接设置；而style对象既支持读取也支持修改属性。

对于未定义任何样式的元素，getComputedStyle()返回的对象中length属性有具体数值，而style对象中的length属性值为0。

不同浏览器对currentStyle对象的支持程度存在差异，因此在实际开发中需要进行兼容性处理。


var div=document.getElementById('div');

var colorStr=null;

if(div.currentStyle){//兼容IE

       colorStr=div.currentStyle;

}else{
colorStr=window.getComputedStyle(div,null);

}

var col=colorStr.color;//得到div的color属性值