用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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 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
德生1994机评
2021/03/02 无线电
php 随机生成10位字符代码
2009/03/26 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
Convert Seconds To Hours
2007/06/16 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
python检测远程端口是否打开的方法
2015/03/14 Python
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
Python实现直播推流效果
2019/11/26 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
python烟花效果的代码实例
2020/02/25 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
网络宣传方案
2014/03/15 职场文书
委托书范本
2014/04/02 职场文书
车贷收入证明范本
2014/09/14 职场文书
《开国大典》教学反思
2016/02/16 职场文书
nginx优化的六点方法
2021/03/31 Servers
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
Redis Cluster 集群搭建你会吗
2021/08/04 Redis