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


Posted in Javascript onOctober 10, 2008

有兴趣的朋友搜索"百度 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";

Javascript 相关文章推荐
JavaScript调用Activex控件的事件的实现方法
Apr 11 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
es6函数之尾递归用法实例分析
Apr 25 Javascript
执行iframe中的javascript方法
Oct 07 #Javascript
JS版网站风格切换实例代码
Oct 06 #Javascript
判断JavaScript对象是否可用的最正确方法分析
Oct 03 #Javascript
IE与firefox之jquery用法区别
Oct 03 #Javascript
jquery的颜色选择插件实例代码
Oct 02 #Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 #Javascript
JavaScript下申明对象的几种方法小结
Oct 02 #Javascript
You might like
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
PHP 采集程序原理分析篇
2010/03/05 PHP
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
深入理解Javascript中的循环优化
2013/11/09 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
Python使用进程Process模块管理资源
2020/03/05 Python
html5时钟实现代码
2010/10/22 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
Lyle & Scott苏格兰金鹰官网:英国皇室御用品牌
2018/05/09 全球购物
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
迷你西餐厅创业计划书范文
2013/12/31 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
自我查摆剖析材料
2014/10/11 职场文书
护理专业自我评价
2015/03/11 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
千万级用户系统SQL调优实战分享
2022/03/03 MySQL
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers