zoukankan      html  css  js  c++  java
  • 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”。
  • 相关阅读:
    LeetCode 152. 乘积最大子数组 | Python
    LeetCode 31. 下一个排列 | Python
    LeetCode 136. 只出现一次的数字 | Python
    LeetCode 102. 二叉树的层序遍历 | Python
    LeetCode 155. 最小栈 | Python
    LeetCode 69. x 的平方根 | Python
    Python3 高阶函数
    Python3 装饰器
    Python3 递归函数
    Python3 函数
  • 原文地址:https://www.cnblogs.com/blfshiye/p/4329522.html
Copyright © 2011-2022 走看看