用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 相关文章推荐
如何在一个页面显示多个百度地图
Apr 07 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
微信小程序删除处理详解
Aug 16 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
使用vue实现通过变量动态拼接url
Jul 22 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实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
Python 转义字符详细介绍
2017/03/21 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
python 实现控制鼠标键盘
2020/11/27 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
擅自离岗检讨书
2014/09/12 职场文书
2014年图书室工作总结
2014/12/09 职场文书
检讨书范文300字
2015/01/28 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
详解Python魔法方法之描述符类
2021/05/26 Python
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
html5调用摄像头截图功能
2022/01/18 Javascript