JavaScript 获取与设置样式的原理及兼容性处理

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";的写法。