用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 相关文章推荐
禁止刷新,回退的JS
Nov 25 Javascript
web页面数据展示新想法(json)
Jun 08 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
canvas绘制的直线动画
Jan 23 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
总结js函数相关知识点
Feb 27 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 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
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
python连接字符串的方法小结
2015/07/13 Python
Python调用C语言的实现
2019/07/26 Python
python实现ftp文件传输功能
2020/03/20 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
python 实现aes256加密
2020/11/27 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
静态变量和实例变量的区别
2015/07/07 面试题
中学实习教师自我鉴定
2013/12/12 职场文书
培训讲师岗位职责
2014/04/13 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
婚宴致辞
2015/07/28 职场文书
思想品德课教学反思
2016/02/24 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书