如何用javascript获取和设置css3属性

Posted 2020-07-23 zcynine

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用javascript获取和设置css3属性相关的知识，希望对你有一定的参考价值。

==================获取========================

我想到的第一个思路

var test = document.getElementById(‘test‘);
console.log(test.style);

然而这种方法并没有什么效果，因为style代表的是行间样式。

我突然想起以前学JS运动，有一个叫做getStyle的方法

function getStyle(obj, name){
    if(obj.currentStyle){
        return obj.currentStyle[name];
    }else{
        return getComputedStyle(obj, false)[name];
    }
}

这个方法用兼容的方式来获得元素的CSS属性

如果我们把这个方法的name去掉，就可以获得所有的CSS属性集合

function getFullStyle(obj){
    if(obj.currentStyle){
        return obj.currentStyle;
    }else{
        return getComputedStyle(obj, false);
    }
}

这样我们就可以获得所有属性了。

如果是CSS3的属性，通常都是以webkit开头的，只要按照字母顺序找到w开头的属性就好了。

总结一下

function getStyle(obj, name){
    if(obj.currentStyle){
        return obj.currentStyle[name];
    }else{
        return getComputedStyle(obj, false)[name];
    }
}

function getFullStyle(obj){
    if(obj.currentStyle){
        return obj.currentStyle;
    }else{
        return getComputedStyle(obj, false);
    }
}

这两个方法可以放在自己的库里随时随地调用。

=============================设置=====================

至于设置，我们还是要通过行间样式来设置，我们可以先看下style里都有啥

var test = document.getElementById(‘test‘);
console.log(test.style);

比如animation-name这个属性，在style里叫animationName，所以设置的时候直接这样设置就好了

test.style.animationName = ‘show‘;

==================用jQuery获取和设置CSS3属性=================

jQuery只能使用css()方法来获取指定的css属性，设置的话只能使用attr来设置，而且还不如原生javascript的style好用。

最后把我写的测试demo贴一下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>getCSS3</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html, body{
            height: 100%;
        }
        .test{
            width: 500px;
            height: 500px;
            position: absolute;
            left: 200px;
            top: 50px;
            background: red;
            -webkit-animation: rotate 8s linear infinite both;
            border-radius: 30px;
            box-shadow: 0 0 10px #000;
        }

        @-webkit-keyframes rotate{
            0%{-webkit-transform:rotate(0deg)}
            100%{-webkit-transform:rotate(360deg)}
        }

        @-webkit-keyframes show{
            0%{height: 0px;}
            100%{height: 500px;}
        }
    </style>
</head>
<body>
    <div class="test" id="test"></div>




    <script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        var test = document.getElementById(‘test‘);
        console.log(getFullStyle(test));
        console.log(getStyle(test,‘animation-name‘));

        console.log(test.style);
        test.style.animationName = ‘show‘;

        function getStyle(obj, name){
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }else{
                return getComputedStyle(obj, false)[name];
            }
        }

        function getFullStyle(obj){
            if(obj.currentStyle){
                return obj.currentStyle;
            }else{
                return getComputedStyle(obj, false);
            }
        }
    </script>
</body>
</html>

以上是关于如何用javascript获取和设置css3属性的主要内容，如果未能解决你的问题，请参考以下文章

如何用css使边框颜色渐变

如何用js给html表单设置style

如何用JavaScript捕获CSS3的动画事件

如何用css3设置去除file默认效果

如何用javascript 跨域获取iframe子页面的元素信息

如何用JavaScript去操作HTML元素和CSS样式