用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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
Mar 19 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 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个人网站架设连环讲(二)
2006/10/09 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
js 目录列举函数
2008/11/06 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
python使用pil生成缩略图的方法
2015/03/26 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
华为C++笔试题
2014/08/05 面试题
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
通讯稿范文
2015/07/22 职场文书
证婚人致辞精选
2015/07/28 职场文书
《日月潭》教学反思
2016/02/20 职场文书
《司马光》教学反思
2016/02/22 职场文书
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
JVM钩子函数的使用场景详解
2021/08/23 Java/Android