currentStyle和getComputedStyle的兼容写法

今天学习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>
时间: 2024-10-12 18:11:44

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

javascript:currentStyle和getComputedStyle的兼容写法

currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到. 注意:不能获取复合样式如background属性值,只能获取单一样式如background-color等. alert (oAbc.currentStyle); 非常遗憾的是,这个好使的东西也不能被各大浏览器完美地支持.准确地说,在我测试的浏览器中,IE8和Opera 11弹出了“object CSSStyleDeclarati

currentstyle和getComputedStyle兼容问题

currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到. 注意:不能获取复合样式如background属性值,只能获取单一样式如background-color等. alert (oAbc.currentStyle); 非常遗憾的是,这个好使的东西也不能被各大浏览器完美地支持.准确地说,在我测试的浏览器中,IE8和Opera 11弹出了"object CSSStyleDeclarati

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

style:获取行间样式: currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意:不能获取复合样式如background属性值,只能获取单一样式如background-color等. alert (oAbc.currentStyle);IE8和Opera 11弹出了“object CSSStyleDeclaration”:FF 12.chrome 14.safari 5则弹出“

js中style,currentStyle和getComputedStyle的区别

js中style,currentStyle和getComputedStyle的区别 MarysMa 在js中用xx.style.marginTop是无法获取写在css或<sytle>标签中的margin-top之类的样式值(包括width,height等). 这就是style属性的限制: style :只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.(内联样式: body中标签里用style直接写的样式.) currentStyle :可以弥补style的不足,但是只适用

style、currentStyle、getComputedStyle区别介绍

样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表(External Style Sheet):指引入以.css为后缀的CSS文件,.最常用的是style属性,即在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到 XXX的值,但意外的是,这样做只能取到通过

JavaScript中style, currentStyle和 getComputedStyle的异同

今天在做项目的时候,习惯性的用到了element.style.width,然而浏览器却报错,错误提示是style is undefined,这是我才意识到,内联样式表和外联样式表在js应用中也有很大的不同! 首先样式表有三种,外联样式,内联样式,行间样式,element.style.attr只有在attr定义在行间样式时才生效,因此替代方案,currentStyle和getComputedStyle出现了. currentStyle是由微软提出来的,目的就是为了返回当前元素应用的属性,不管是外联

return,this,arguments,currentStyle和getComputedStyle小析

一.return返回值:1.函数名+括号:fn()==>return 后面的值2.所有函数默认返回值:未定义3.return后面的任何代码都不会执行二.this:当前对象1.当某个对象后边加事件等于某个函数时,函数中出现的this是指当前的那个对象2.当函数中包含另一个函数时,另一个函数中的this指的是另一个函数对象三.arguments:实参的集合1.当调用没有形参的函数时传了参数,实参就会保存在arguments的实参集合中eg:fn(1,2,3)function fn(){alert(a

style、currentStyle、getComputedStyle

       在写js时常会遇到一些改变当前样式的问题,来达到改变显示效果.完成一些动画等等(如:display),但在获取时往往遇到问题(以前常用document.getElementById("xx").style[""]),因为这样只能获取内嵌属性的值,而不会获取样式表中的值,内外部样式表设置的css样式不会改变style属性的值(在标签中未写的style里包含的会取默认值).下面先来了解一下样式的定义 样式表的三种方式 A.内嵌样式(inline Style

JavaScript强化教程——style、currentStyle、getComputedStyle区别介绍

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— style.currentStyle.getComputedStyle区别介绍 style.currentStyle.getComputedStyle区别介绍 样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表(Extern