javascript的样式获取--getComputedStyle、currentStyle、style
来源:互联网 发布:mac装个虚拟机 编辑:程序博客网 时间:2024/04/29 23:12
在css样式表有三种方式
内嵌样式(inline Style) :是写在html标签里的,内嵌样式只对所有的Tag有效。
内部样式(internal Style Sheet):是写在HTML的<head><style></style></head>里面的,内部样式只对所在的网页有效。
外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用<link>这个CSS文件。
DOM标准引入了覆盖样式表的概念,document.getElementById(‘element').style.xxx可以获取元素的样式信息,可是它获取的只是DOM元素style属性里的内联样式规则,对于通过class属性引用的外部样式表的信息,是无法获取到的。
解决方案:引入currentStyle,getComputedStyle
如果要获取外部样式表中的信息,就会用到DOM标准里定义的,widow对象的全局方法getComputedStyle(),window.getComputedStyle(id,null).xxx,可以获取到当前对象样式规则信息如:getComputedStyle(obj,null).fontSize,就能获取到对象的字体大小。
但是存在兼容问题。IE浏览器不支持此方法,它有自己的一个实现方式currentStyle,但不同于全局方法getComputedStyle,它是作为DOM元素属性存在的。
PS:如果是获取背景色,这种方法在firefox和IE中的返回值还是不一样的,IE中是返回"#ffff99"样子的,而firefox中返回"rgb(238, 44, 34) ",值得注意的是:window.getComputedStyle(id,null)这种方式不能设置样式,只能获取,要设置还得写成类似这样id.style.background="#EE2C21";
解决兼容问题:
if(typeof window.getComputedStyle != 'undefined'){//w3c return window.getComputedStyle(id,null)[attribute];}else if(typeof id.currentStyle != 'undefined'){ return id.currentStyle[attribute];}
- javascript的样式获取--getComputedStyle、currentStyle、style
- 获取元素样式方式 style、getcomputedstyle与 currentStyle 的用法
- getComputedStyle与currentStyle获取样式(style/class)
- getComputedStyle与currentStyle获取样式(style/class)
- getComputedStyle与currentStyle获取样式(style/class)
- 获取样式currentstyle(),getComputedStyle()
- JS获取CSS样式(style/getComputedStyle/currentStyle)
- style和currentStyle和getComputedStyle获取css样式
- 获取样式 currentStyle与getComputedStyle
- style、currentStyle、getComputedStyle的应用
- js获取css值的方法:style、getComputedStyle和currentStyle
- js获取css值的方法:style、getComputedStyle和currentStyle
- js获取css值的方法:style、getComputedStyle和currentStyle
- accumulate everyday:style、currentStyle、getComputedStyle样式
- style,currentStyle,getComputedStyle的区别和用法
- 验证style,currentStyle以及getComputedStyle的兼容性。
- JS中style、currentStyle、getComputedStyle的区别
- JS中style、currentStyle、getComputedStyle的区别
- SVN服务器搭建和使用(三)
- Java浅度克隆和深度克隆
- Java实现图片任意角度旋转
- Linux ALSA 声卡驱动之八:ASoc中的Platform
- oracle中sql语句的优化
- javascript的样式获取--getComputedStyle、currentStyle、style
- java项目部署到linux的步骤和一些简单的linux命令
- C++析构函数为什么要为虚函数
- QT发布时经常出现的问题
- Java绘制图片并实现打印前生成图片文件进行预览
- 第六天课程(汽车品牌 英雄联盟项目)-琐碎知识
- 解决:Chrome主页变hao123
- CEdit焦点问题
- 解决:联想笔记本用无线上网一会儿就断网,要重启或者重连接才能工作