当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用javascript getComputedStyle获取和设置style的原理

Javascript
javascript的事件描述
用javascript动态注释掉HTML代码
对联广告
[原创]菜单制作学习一个小东西
JavaScript中的私有成员
基于Web标准的UI组件 — 树状菜单(2)
JavaScript静态的动态
JavaScript Base64编码和解码,实现URL参数传递。
跨浏览器的设置innerHTML方法
多个iframe自动调整大小的问题
判断checkbox选择的个数 多浏览器
发现的以前不知道的函数
Js+XML 操作
Javascript里使用Dom操作Xml
JS+CSS模拟IP输入框
prototype1.5 初体验
prototype 源码中文说明之 prototype.js
prototype1.4中文手册
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
js实现ASP分页函数 HTML分页函数

Javascript 中的 用javascript getComputedStyle获取和设置style的原理


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 222 ::
收藏到网摘: n/a

这两天用了baidu 百度空间中的弹出窗口js,感觉不错,很强大,很好很简单的解决了好几个问题,界面友好度以及美化也好多了,以前都是硬邦邦window.open(); 有兴趣的朋友搜索"百度 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";