javascript: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:currentStyle和getComputedStyle的兼容写法的更多相关文章
- currentStyle和getComputedStyle的兼容写法
今天学习javascript的时候,教程中介绍了一种简单实现jQuery 中css()方法的写法 <!DOCTYPE html> <html lang="en"& ...
- [转]currentStyle和getComputedStyle的兼容写法
currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到. 注意:不能获取复合样式如bac ...
- js获取样式、currentStyle和getComputedStyle的兼容写法
currentStyle获取计算后的样式,也叫当前样式.最终样式.优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意:不能获取复合样式如backgr ...
- javascript阻止事件冒泡的兼容写法及其相关示例
//阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...
- javascript中经典继承的兼容写法
function create(obj) { // 2.1 判断浏览器支持不支持 Object.create // 如果支持,直接使用 Object.create // 如果不支持,自己实现 if(O ...
- javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍) (转载)
样式表有三种方式: 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. (也称作“内联样式”) 内部样式(internal Style Sheet):是写在 ...
- currentstyle和getComputedStyle兼容问题
currentStyle:获取计算后的样式,也叫当前样式.终于样式. 长处:能够获取元素的终于样式,包含浏览器的默认值,而不像style仅仅能获取行间样式,所以更经常使用到. 注意:不能获取复合样式如 ...
- javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽
运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...
- JavaScript获取HTML元素样式的方法(style、currentStyle、getComputedStyle)
一.style.currentStyle.getComputedStyle的区别 style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补st ...
随机推荐
- PHP中VC6、VC9、TS、NTS版本区别与用法
1. VC6与VC9的区别: VC6 版本是使用 Visual Studio 6 编译器编译的,如果你的 PHP 是用 Apache 来架设的,那你就选择 VC6 版本. VC9 版本是使用 Vis ...
- springcloud Zuul中路由配置细节
上篇文章我们介绍了API网关的基本构建方式以及请求过滤,小伙伴们对Zuul的作用应该已经有了一个基本的认识,但是对于路由的配置我们只是做了一个简单的介绍,本文我们就来看看路由配置的其他一些细节. 首先 ...
- Project Euler Problem2
Even Fibonacci numbers Problem 2 Each new term in the Fibonacci sequence is generated by adding the ...
- Angularjs里面跨作用域的实战!
好久没有来写博客了,最近一直在用Google的AngularJS,后面我自己简称AngularJS就叫AJ吧! 学习AngularJS一路也是深坑颇多啊--!就不多说了,不过还是建议大家有时间去学下下 ...
- python文件操作及格式化输出
1 文件与IO 1.1读写文本数据 读写各种不同的文本数据,如ASCII,UTF-8,UTF-9编码等. 使用带有rt模式的open()函数读取文本文件. 例如: with open('db', 'r ...
- mac zsh环境配置java_home环境变量
用zsh,修改-/.zshrc 修改这些文件之后,重修打开terminal,配置不会丢 首先确保已经安装了jdk: ## check the present running java which ja ...
- ansible源码解读
Ansible源码获取 Ansible Github:https://github.com/ansible Ansible目录结构 $ tree -L 2 ansible-2.0.0.0 ansibl ...
- 微信小程序开发之IOS/Android兼容坑(持续更新)
一.时间转换问题: 这不只是小程序上面的问题是ios系统 都有这个问题就是new Date("2017-06-16") 在IOS会出现NAN的情况所以对于时间转换需要另行封装,解 ...
- SQL Server 3
一.数据压缩 1.行压缩 行压缩可将固定长度类型存储为可变长度存储类型.例如,使用char(100)数据列存储字符串“SQL Server 2012”,压缩后只需要存放15个字符.(这种压缩模式,将对 ...
- shiro中async-supported报错 cvc-complex-type.2.4.a: Invalid content was found starting with element 'async-supported'. One of '{"http://java.sun.com/xml/ns/ javaee":init-param}' is expected.
最近都在研究shiro这个框架,今天实施了一下,就报了如下错误: cvc-complex-type.2.4.a: Invalid content was found starting with ele ...