用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 相关文章推荐
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
Angular 路由route实例代码
Jul 12 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
关于vue.js组件数据流的问题
Jul 26 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 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 session安全问题分析
2011/06/24 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
取得父标签
2006/11/14 Javascript
js下弹出窗口的变通
2007/04/18 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
Python 登录网站详解及实例
2017/04/11 Python
python清理子进程机制剖析
2017/11/23 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
教师自我评价范例
2013/09/24 职场文书
中英文自我评价常用句型
2013/12/19 职场文书
物业门卫岗位职责
2013/12/28 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
保护环境倡议书
2014/04/14 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android
教你部署vue项目到docker
2022/04/05 Vue.js