[转]currentStyle和getComputedStyle的兼容写法
currentStyle:获取计算后的样式,也叫当前样式、最终样式。
优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到。
注意:不能获取复合样式如background属性值,只能获取单一样式如background-color等。
alert (oAbc.currentStyle);
非常遗憾的是,这个好使的东西也不能被各大浏览器完美地支持。准确地说,在我测试的浏览器中,IE8和Opera 11弹出了“object CSSStyleDeclaration”;FF 12、chrome 14、safari 5则弹出“undefined”。
虽然currentStyle无法适用于所有浏览器,但是可以根据以上测试的结果来区分开支持、不支持的浏览器,然后再找到兼容的写法。
var oAbc = document.getElementById("abc");
if(oAbc.currentStyle) {
//IE、Opera
alert("我支持currentStyle");
} else {
//FF、chrome、safari
alert("我不支持currentStyle");
}
其实在FF浏览器中我们可以使用getComputedStyle(obj,false)来达到与IE下currentStyle相同的效果。
getComputedStyle(obj,false):在FF新版本中只需要第一个参数,即操作对象,第二个参数写“false”也是大家通用的写法,目的是为了兼容老版本的火狐浏览器。
兼容写法:
var oAbc = document.getElementById("abc");
if(oAbc.currentStyle) {
//IE、Opera
//alert("我支持currentStyle");
alert(oAbc.currentStyle.width);
} else {
//FF、chrome、safari
//alert("我不支持currentStyle");
alert(getComputedStyle(oAbc,false).width);
}
一个空白页面中body的id=”abc”,测试以上代码,IE和Opera弹出“auto”,其它三款浏览器则弹出“***px”。虽然结果不同,但是可以发现chrome和safari也都和火狐一样,顺利地读取到了属性值。不支持currentStyle的三款浏览器(FF、chrome、safari),都是支持getComputedStyle的。
结果表明:对浏览器是否支持currentStyle的判断 + getComputedStyle,就可以做到兼容各主流浏览器的效果。而且兼容写法并不复杂,你掌握了吗?^_^
支持currentStyle:IE、Opera
支持getComputedStyle:FireFox、Chrome、Safari
注意最后的弹出内容,currentStyle返回浏览器的默认值”auto”,而getComputedStyle则返回具体的值”**px”。这应该是两者的一个小差异,有兴趣的童鞋可以一起交流研究下。
更多相关:
更多javascript入门知识:javascript笔记。
54173BLOG原创,转载请保留链接: http://www.mming.cc/blog/?p=549。
[转]currentStyle和getComputedStyle的兼容写法的更多相关文章
- currentStyle和getComputedStyle的兼容写法
今天学习javascript的时候,教程中介绍了一种简单实现jQuery 中css()方法的写法 <!DOCTYPE html> <html lang="en"& ...
- js获取样式、currentStyle和getComputedStyle的兼容写法
currentStyle获取计算后的样式,也叫当前样式.最终样式.优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意:不能获取复合样式如backgr ...
- javascript:currentStyle和getComputedStyle的兼容写法
currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到. 注意:不能获取复合样式如bac ...
- currentstyle和getComputedStyle兼容问题
currentStyle:获取计算后的样式,也叫当前样式.终于样式. 长处:能够获取元素的终于样式,包含浏览器的默认值,而不像style仅仅能获取行间样式,所以更经常使用到. 注意:不能获取复合样式如 ...
- javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽
运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...
- js中style,currentStyle和getComputedStyle的区别以及获取css操作方法
在js中,之前我们获取属性大多用的都是ele.style.border这种形式的方法,但是这种方法是有局限性的,该方法只能获取到行内样式,获取不了外部的样式.所以呢下面我就教大家获取外部样式的方法,因 ...
- javascript获取行间样式和非行间样式--兼容写法
style:获取行间样式: currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意 ...
- JS——样式获取的兼容写法
样式获取 普通获取属性方式div.style.width或者div.style["width"]无法获取内嵌和外链式,只能获取行内式 window.getComputedStyle ...
- Javascript中style,currentStyle和getComputedStyle的区别以及获取css操作方法
style: 只能获取行内style. 调用:obj.style.属性; 兼容:都兼容 currentStyle: 可以获取该obj所有style,但只可读. 调用:obj.currentStyle[ ...
随机推荐
- 某labs上传writeup-上传漏洞总结
github:https://github.com/d0ef/upload-labs 第一题:通过JS判断的直接抓包改了就ok. 第二题:只要Content-Type信息为图片的就可以 第三题:通过上 ...
- webpack版本1与版本2的若干写法区别
2.x的环境遇到类似this._init is not a function的报错. 版本1.x的写法: resolve: { extensions: ['', '.js', '.vue'] }, m ...
- FreeRADIUS + MySQL 安装配置笔记
FreeRADIUS + MySQL 安装配置笔记 https://www.2cto.com/net/201110/106597.html
- selenium.webdriver.common.keys 模块中常用的变量
表11-5 selenium.webdriver.common.keys 模块中常用的变量属性 含义Keys.DOWN, Keys.UP, Keys.LEFT,Keys.RIGHT 键盘箭头键Keys ...
- 让我们来一起学习OC吧
在本分类中的接下来的将翻译http://rypress.com/tutorials/objective-c/index 通过每一章节的翻译,使得自己的OC基础扎实并分享给大家.
- Django Model笔记
常用数据类型 # https://docs.djangoproject.com/en/1.8/ref/models/fields/#field-types BooleanField:布尔类型true/ ...
- centos 7 防火墙设置
一.介绍 centos 7 的防火墙是以firewalld daemon的形式存在,区别于iptables 二.使用方法 centos7 主要通过firewall-cmd命令来管理firewall, ...
- 更换163的yum源
1.利用oss的文件目录形式进行各地项目的汇总保存.上报在A目录,统计过的放到B目录. 2.各地服务器健康状态检查,每5分钟检查项目, 如果有异常,就发短信+邮件进行汇报.不管是不是有异常,都以 ...
- 关于在webapi + ef + 视图 + top查询的问题
在ef中使用视图中有一种坑是视图没有主键,表现的形式是有些数据会出现重复,解决的方法是手动在视图中添加主键即可 在实际的项目中碰到另一种坑,即使用webapi查询时的一种,现记录情况如下: 1:随便创 ...
- 熟悉并了解uml的使用(一)
本资料对UML各种模型图的构成和功能进行说明,通过本资料的学习达到可以读懂UML模型图的目的.本资料不涉及模型图作成的要点等相关知识. UML简介 UML (Unified Modeling Lang ...