js implementation method of getting and setting css3 attribute values_javascript skills

It is well known that CSS3 has added a lot of attributes, which are not as convenient as before when reading and writing.

For example:

left:100px">

If only the interline style is considered, You only need div.style.left to get it, and you only need div.style.left='100px' when setting it. Very simple.

But css3 is coming

For example:

-webkit-transform: translate(20px,-20px)"> ;

What to do? Terrified. . .

The setting is very simple:
div.style.webkitTransform='translate(20px,-20px) ' Just follow the camel case writing method.

When getting:
The value of div.style.webkitTransform is the string 'translate(20px,-20px) '
How to get the desired X and Y values? After searching for a long time, I couldn't find a simple solution. It can only be obtained by string interception or regular matching.

Write a regular expression to get the desired 20 and -20

reg=/-?[0-9] /g Match negative signs and numbers

reg2= /-?[0-9] .?[0-9]*/g May contain decimal points

Then search for
div.webkitTransform.match(reg) //Result [20, -20]
will return an array containing X and Y values.

Same as:
-webkit-transform: skew(20deg,-50deg); /* skew (inclined relative to the x-axis, inclined relative to the y-axis)*/

-webkit- transform: matrix(1,0.4,0,1,0,0);

Various and so on. . .