用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据option的value值快速设定初始的selected选项
Aug 13 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
javaScript基础语法介绍
Feb 28 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
执行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 文件缓存的性能测试
2010/04/25 PHP
php自动获取目录下的模板的代码
2010/08/08 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
在Python中使用异步Socket编程性能测试
2014/06/25 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
python opencv调用笔记本摄像头
2019/08/28 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
python中添加模块导入路径的方法
2021/02/03 Python
工程部经理岗位职责
2013/12/08 职场文书
便利店投资创业计划书
2014/02/08 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
竞争上岗实施方案
2014/03/21 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
植树节口号
2014/06/21 职场文书
Go语言设计模式之结构型模式
2021/06/22 Golang
Android studio 简单计算器的编写
2022/05/20 Java/Android