用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 时间比较实现代码
Oct 28 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
vue组件系列之TagsInput详解
May 14 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实现找出链表中环的入口节点
2018/01/16 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
python通过zabbix api获取主机
2018/09/17 Python
Python登录系统界面实现详解
2019/06/25 Python
Pandas之排序函数sort_values()的实现
2019/07/09 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
利用python 读写csv文件
2020/09/10 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
Java程序员面试题
2016/09/27 面试题
启动仪式策划方案
2014/06/14 职场文书
食品安全处置方案
2014/06/14 职场文书
学校读书活动总结
2014/06/30 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
Redis高可用集群redis-cluster详解
2022/03/20 Redis