用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脚本
Aug 04 Javascript
9个javascript语法高亮插件 推荐
Jul 18 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
Bootstrap3下拉菜单的实现
Feb 22 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 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
调频问题解答
2021/03/01 无线电
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
儿童编程python入门
2018/05/08 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
python计算无向图节点度的实例代码
2019/11/22 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
医院保洁服务方案
2014/06/11 职场文书
法院授权委托书范文
2014/08/02 职场文书
雷锋的观后感
2015/06/10 职场文书
单身证明范本
2015/06/15 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
详解Python requests模块
2021/06/21 Python