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的兼容写法的更多相关文章

  1. currentStyle和getComputedStyle的兼容写法

    今天学习javascript的时候,教程中介绍了一种简单实现jQuery 中css()方法的写法 <!DOCTYPE html> <html lang="en"& ...

  2. [转]currentStyle和getComputedStyle的兼容写法

    currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到. 注意:不能获取复合样式如bac ...

  3. js获取样式、currentStyle和getComputedStyle的兼容写法

    currentStyle获取计算后的样式,也叫当前样式.最终样式.优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意:不能获取复合样式如backgr ...

  4. javascript阻止事件冒泡的兼容写法及其相关示例

    //阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...

  5. javascript中经典继承的兼容写法

    function create(obj) { // 2.1 判断浏览器支持不支持 Object.create // 如果支持,直接使用 Object.create // 如果不支持,自己实现 if(O ...

  6. javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍) (转载)

    样式表有三种方式: 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效.   (也称作“内联样式”) 内部样式(internal Style Sheet):是写在 ...

  7. currentstyle和getComputedStyle兼容问题

    currentStyle:获取计算后的样式,也叫当前样式.终于样式. 长处:能够获取元素的终于样式,包含浏览器的默认值,而不像style仅仅能获取行间样式,所以更经常使用到. 注意:不能获取复合样式如 ...

  8. javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽

    运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...

  9. JavaScript获取HTML元素样式的方法(style、currentStyle、getComputedStyle)

    一.style.currentStyle.getComputedStyle的区别 style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补st ...

随机推荐

  1. poj2054

    题意:给定一棵树,每个节点有一个权值,现要求给这些节点进行排列,设排列后的节点顺序为v1~vn,它们的权值是w1~wn,那么我们要求一种排列使得w1*1+w2*2+...+wn*n最小.还有一个限制就 ...

  2. (windows下)安装mysql

    一.先从mysql的官网上下载对应版本的mysql zip包(适用于windows下的) 二.解压zip包放到自定义的文件夹下(我放的是e盘,路径为E:\mysql-5.6.40-winx64) 三. ...

  3. Pandas DataFrame数据的增、删、改、查

    Pandas DataFrame数据的增.删.改.查 https://blog.csdn.net/zhangchuang601/article/details/79583551 #删除列 df_2 = ...

  4. python enumrate使用

    新接触了一个函数 enumrate ,很多情况下我们想获得可迭代的容器(例如dict.list.tuple等)元素的时候,想同时获得一个序号用以他用. 代码常常写成这个样子 list_a = [&qu ...

  5. Transition学习笔记

    概述 Android 4.4.2 (API level 19)引入Transition框架,之后很多APP上都使用该框架做出很酷炫的效果,如 Google Play Newsstand app 还有g ...

  6. maven dependencies 报错

    maven配置的环境变量有问题: 用最新的maven替换系统默认的setting.xml文件即可

  7. go make切片中len() 和 cap() 的差别

    对于make slice而言,有两个概念需要搞清楚:长度跟容量. 容量表示底层数组的大小,长度是你可以使用的大小. 容量的用处在哪?在与当你用 appen d扩展长度时,如果新的长度小于容量,不会更换 ...

  8. MySQL缓存命中率概述

    工作原理: 查询缓存的工作原理,基本上可以概括为: 缓存SELECT操作或预处理查询(注释:5.1.17开始支持)的结果集和SQL语句: 新的SELECT语句或预处理查询语句,先去查询缓存,判断是否存 ...

  9. 神奇的Content-Type--在JSON中玩转XXE攻击

    转自:360安全播报http://bobao.360.cn/learning/detail/360.html 大家都知道,许多WEB和移动应用都依赖于Client-Server的WEB通信交互服务.而 ...

  10. IOC入门

    Spring六大模块 1.SpringCore  spring的核心功能:IOC容器,解决对象的创建及依赖关系 2.SpringWeb   spring对Web模块的支持 3.SpringDAO  s ...