用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获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
angular之ng-template模板加载
Nov 09 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
js实现自动锁屏功能
Jun 02 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留言板 xml存储数据的简单例子
2009/08/24 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
一句话JavaScript表单验证代码
2009/08/02 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
python unittest实现api自动化测试
2018/04/04 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
Python Collatz序列实现过程解析
2019/10/12 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
python遍历路径破解表单的示例
2020/11/21 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
美术教师求职信范文
2015/03/20 职场文书
《检阅》教学反思
2016/02/22 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
配置Kubernetes外网访问集群
2022/03/31 Servers