How to get and set the CSS3 property with JavaScript

================== Get ========================

The first idea I thought of

var test = document.getElementById (' test '); Console.log (Test.style);

This approach, however, has little effect because the style represents the inline style.

I suddenly think of the previous learning JS movement, there is a method called GetStyle

function GetStyle (obj, name) {    if(obj.currentstyle) {        return  Obj.currentstyle[name];    } Else {        returnfalse) [name];    }}

This method obtains the CSS properties of the element in a compatible way

If we remove the name of this method, we can get all the CSS property collections

function Getfullstyle (obj) {    if(obj.currentstyle) {        return  Obj.currentstyle;    } Else {        returnfalse);}    }

So we can get all the attributes.

If it is a property of CSS3, it usually begins with WebKit, as long as you find the attribute that begins with W in alphabetical order.

Summarize

functionGetStyle (obj, name) {if(obj.currentstyle) {returnObj.currentstyle[name]; }Else{        returngetComputedStyle (obj,false) [name]; }}functionGetfullstyle (obj) {if(obj.currentstyle) {returnObj.currentstyle; }Else{        returngetComputedStyle (obj,false); }}

These two methods can be placed in their own library anytime, anywhere call.

============================= setting =====================

As for the setting, we still have to set it through the inline style, so we can start by looking at what's in the style.

var test = document.getElementById (' test '); Console.log (Test.style);

For example, animation-name this property, in the style called Animationname, so set the time to set it up just fine

Test.style.animationName = ' show ';

================== use jquery to get and set the CSS3 property =================

jquery can only use the CSS () method to get the specified CSS properties, which can only be set using attr, and is not as good as the native JavaScript style.

Finally, I'll post the test demo I wrote.

<! DOCTYPE html>{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>varTest = document.getElementById (' Test ');        Console.log (Getfullstyle (test)); Console.log (GetStyle (test,' Animation-name '));        Console.log (Test.style); Test.style.animationName= ' Show '; functionGetStyle (obj, name) {if(obj.currentstyle) {returnObj.currentstyle[name]; }Else{                returngetComputedStyle (obj,false) [name]; }        }        functionGetfullstyle (obj) {if(obj.currentstyle) {returnObj.currentstyle; }Else{                returngetComputedStyle (obj,false); }        }    </script></body>
How to get and set the CSS3 property with JavaScript