本文解析 JavaScript 中通过 style 属性与 getComputedStyle 方法获取样式的区别，指出前者仅能读取内联样式。针对 Firefox 与 IE 的兼容性问题，提供了结合 getComputedStyle 与 currentStyle 的兼容写法，并说明两者在颜色返回值格式上的差异及设置样式的正确方式。
JavaScript 获取与设置样式的原理及兼容性处理
感兴趣的用户可以搜索“百度 popup”，已有他人提供注释，功能强大。
最有趣的部分在于利用javascript获取和设置style。
DOM标准引入了覆盖样式表的概念。当使用document.getElementById("id").style.backgroundColor获取样式时，仅能获取id中style属性直接设置的背景色。若id的style属性未设置background-color，则返回空值。这意味着，若id通过class属性引用外部样式表，其中设置的背景色无法通过document.getElementById("id").style.backgroundColor获取。要获取外部样式表中的设置，需使用window对象的getComputedStyle()方法，代码示例为window.getComputedStyle(id,null).backgroundColor。
然而兼容性问题随之而来，该写法在firefox中有效，但在IE中无效。
两者的兼容写法如下。
window.getComputedStyle?window.getComputedStyle(id,null).backgroundColor:id.currentStyle["backgroundColor"];
若获取背景色，此方法在firefox和IE中的返回值存在差异：IE返回如"#ffff99"格式，而firefox返回如"rgb(238, 44, 34) "格式。
值得注意的是：window.getComputedStyle(id,null)方式仅能获取样式，无法设置样式。要设置样式，需采用类似id.style.background="#EE2C21";的写法。