getcomputedstyle:用javascript getComputedStyle获取和设置style的原理疯狂代码！

getcomputedstyle:用javascript getComputedStyle获取和设置style的原理

有兴趣

朋友搜索"百度 popup"就好了

已经有人给出了注释

强大

最有意思

是用javascript获取和设置style
DOM标准引入了覆盖样式表

概念

当我们用document.getElementById("id").style.backgroundColor 获取样式时获取

只是id中style属性中设置

背景色

如果id中

style属性中没有设置background-color那么就会返回空

也就是说如果id用

属性引用了

个外部样式表

在这个外部样式表中设置

背景色

那么不好意思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";

getcomputedstyle:用javascript getComputedStyle获取和设置style的原理