今天学习javascript的时候，教程中介绍了一种简单实现jQuery 中css()方法的写法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #div{

            width: 200px;

            height: 200px;

            background: red;

        }

    </style>

</head>

<body>

    <input type="button" value="样式" id="btn">

    <div id="div"></div>

    <script>

        function css(obj, attr, value) {

            if (arguments.length === 2) {

                return obj.currentStyle[attr];

            } else if(arguments.length === 3){

               obj.style[attr] = value;

            }

        }

        window.onload = function (){

            var oBtn = document.getElementById("btn");

            var oDiv = document.getElementById("div");

            oBtn.onclick = function () {

                css(oDiv, 'background', 'green');

                console.log(oDiv.currentStyle.width);

                // console.log(getComputedStyle(oDiv, false).width);

            }

        }

    </script>

</body>

</html>

然而当我用chrome浏览器测试的时候，浏览器却抛出了一个错误

Uncaught TypeError: Cannot read property 'width' of undefined

于是马上联想到这必定又是浏览器大战中留下来的兼容问题，于是小白开始上网搜索，总结如下：

currentStyle：获取计算后的样式，也叫当前样式、最终样式。

　　优点：可以获取元素的最终样式，包括浏览器的默认值，而不像style只能获取行间样式，所以更常用到。
　　注意：不能获取复合样式如background属性值，只能获取单一样式如background-color等。

　　非常遗憾的是，这个好使的东西也不能被各大浏览器完美地支持。准确地说，在我测试的浏览器中，IE8和Opera 11弹出了“object CSSStyleDeclaration”；FF 12、chrome 14则弹出“undefined”。

　　虽然currentStyle无法适用于所有浏览器，但是可以根据以上测试的结果来区分开支持、不支持的浏览器，然后再找到兼容的写法。

其实在FF浏览器中我们可以使用getComputedStyle(obj,false)来达到与IE下currentStyle相同的效果。

　　getComputedStyle(obj,false)：在FF新版本中只需要第一个参数，即操作对象，第二个参数写“false”也是大家通用的写法，目的是为了兼容老版本的火狐浏览器。

以下是兼容写法

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #div{

            width: 200px;

            height: 200px;

            background: red;

        }

    </style>

</head>

<body>

    <input type="button" value="样式" id="btn">

    <div id="div"></div>

    <script>

        function css(obj, attr, value) {

            if (arguments.length === 2) {

                if (obj.currentStyle) {

                    return obj.currentStyle[attr];

                } else {

                    return getComputedStyle(obj, false)[attr];

                }

            } else if(arguments.length === 3){

                obj.style[attr] = value;

            }

        }

        window.onload = function (){

            var oBtn = document.getElementById("btn");

            var oDiv = document.getElementById("div");

            oBtn.onclick = function () {

                css(oDiv, 'background', 'green');

                console.log(css(oDiv, 'width'));

                // console.log(getComputedStyle(oDiv, false).width);

            }

        }

    </script>

</body>

</html>

不支持currentStyle的三款浏览器(FF、chrome、safari)，都是支持getComputedStyle的。

　　

<script>

        // 哪个元素

        // 哪个样式

        function getStyle(obj, attr) {

            var style;

            if (obj.currentStyle) {

                style = obj.currentStyle[attr];

            } else{

                style = getComputedStyle(obj, false)[attr];

            }

            return style;

        }

        window.onload = function (){

            var oDiv = document.getElementById("box");

            console.log(getStyle(oDiv, 'backgroundColor'));

        }

</script>

currentStyle和getComputedStyle的兼容写法的更多相关文章

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

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

  2. javascript:currentStyle和getComputedStyle的兼容写法

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

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

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

  4. currentstyle和getComputedStyle兼容问题

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

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

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

  6. js中style,currentStyle和getComputedStyle的区别以及获取css操作方法

    在js中,之前我们获取属性大多用的都是ele.style.border这种形式的方法,但是这种方法是有局限性的,该方法只能获取到行内样式,获取不了外部的样式.所以呢下面我就教大家获取外部样式的方法,因 ...

  7. javascript获取行间样式和非行间样式--兼容写法

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

  8. JS——样式获取的兼容写法

    样式获取 普通获取属性方式div.style.width或者div.style["width"]无法获取内嵌和外链式,只能获取行内式 window.getComputedStyle ...

  9. Javascript中style,currentStyle和getComputedStyle的区别以及获取css操作方法

    style: 只能获取行内style. 调用:obj.style.属性; 兼容:都兼容 currentStyle: 可以获取该obj所有style,但只可读. 调用:obj.currentStyle[ ...

随机推荐

  1. jQuery常用方法集锦

    用方法:http://www.cnblogs.com/linzheng/archive/2010/11/14/1877092.html 数组汇总:http://www.cnblogs.com/Andy ...

  2. python的map()函数

    map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依次作用在 list 的每个元素上,得到一个新的 list 并返回. 例如,对于list [1, 2 ...

  3. 循环-10. 求序列前N项和(15)

    #include<iostream>#include<iomanip>using namespace std;int main(){    double i,n,t,a,b;  ...

  4. C语言实现约瑟夫环讨论

    [问题描述]     约瑟夫(Joseph)问题的一种描述是:编号为1,2,…,n的n个人按顺时针方向围坐一圈,每人持有一个密码(正整数).一开始任选一个正整数作为报数上限值m,从第一个人开始按顺时针 ...

  5. OpenCV之Python学习笔记

    OpenCV之Python学习笔记 直都在用Python+OpenCV做一些算法的原型.本来想留下发布一些文章的,可是整理一下就有点无奈了,都是写零散不成系统的小片段.现在看 到一本国外的新书< ...

  6. Windows Azure 社区新闻综述（#74 版）

    欢迎查看最新版本的每周综述,其中包含有关云计算和 Windows Azure 的社区推动新闻.内容和对话.以下是本周的亮点. 文章.视频和博客文章 ·   Azure CDN:吸取的宝贵经验(10 月 ...

  7. python3 ImageTk 安装方法

    使用命令: $ sudo yum search PIL | grep python3 可显示得知: python3-dogpile-cache.noarch : A caching front-end ...

  8. 积跬步，聚小流------关于UML类图

    UML的存在 类图是使用频率比較高的UML图,它用于描写叙述系统中所含的类以及它们之间的相互关系,帮助人们简化对系统的理解,也是系统分析和设计阶段的重要产物,也是系统编码和測试的重要类型根据. UML ...

  9. 【科研论文】基于文件解析的飞行器模拟系统软件设计（应用W5300）

    摘要: 飞行器模拟系统是复杂飞行器研制和使用过程中的重要设备,它可以用来模拟真实飞行器的输入输出接口,产生与真实系统一致的模拟数据,从而有效避免因使用真实飞行器带来的高风险,极大提高地面测发控系统的研 ...

  10. c#个性化安装包

    近来想做一个模仿QQ或猎豹浏览器那样的个性化安装包,NSIS或IS等简单看了一下,比较复杂还不确定能不能实现. 想了一下,可以自己开发一个安装包程序,新建一个windows项目,但不知如何将已开发完成 ...