用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 05 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
微信小程序实现授权登录
May 15 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 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 simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
php错误日志简单配置方法
2016/07/11 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
JS 进度条效果实现代码整理
2011/05/21 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
详解React服务端渲染从入门到精通
2019/03/28 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
python中map的基本用法示例
2018/09/10 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
Python列表解析操作实例总结
2020/02/26 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
师范应届毕业生自荐信
2013/11/18 职场文书
教职工代表大会主持词
2014/04/01 职场文书
防灾减灾标语
2014/10/07 职场文书
长江三峡导游词
2015/01/31 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
Python PIL按比例裁剪图片
2022/05/11 Python