用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 相关文章推荐
actionscript与javascript的区别
May 25 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
在Vue中使用HOC模式的实现
Aug 23 Javascript
js实现筛选功能
Nov 24 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的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
深入了解Django中间件及其方法
2019/07/26 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
教师自荐书
2013/10/08 职场文书
网络教育毕业生自我鉴定
2013/10/10 职场文书
大学生简单自荐信
2013/11/10 职场文书
银行介绍信范文
2014/01/10 职场文书
消防先进事迹材料
2014/02/10 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
停电调休通知
2015/04/16 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
2015教师节通讯稿
2015/07/20 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书