用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 hasOwnProperty 方法 & in 关键字
Nov 26 Javascript
jquery获取input的value问题说明
Aug 19 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
javascript常用方法汇总
Dec 02 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 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全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
测试php函数的方法
2013/11/13 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
Python之str操作方法(详解)
2017/06/19 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
招聘专员岗位职责
2014/03/07 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android