用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 相关文章推荐
jQuery 中使用JSON的实现代码
Dec 01 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
jQuery实现验证码功能
Mar 17 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
js中的数组对象排序分析
Dec 11 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
js实现带箭头的进度流程
Mar 26 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
php 常用字符串函数总结
2008/03/15 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
layui分页效果实现代码
2017/05/19 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
[51:15]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-GAMING
2014/05/22 DOTA
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
python字符串常用方法
2018/06/14 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
Python 串口通信的实现
2020/09/29 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
实习期自我鉴定
2013/10/11 职场文书
销售冠军获奖感言
2014/02/03 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
团结友爱主题班会
2015/08/13 职场文书
新党员入党决心书
2015/09/22 职场文书