JS 获取和设置 CSS3 属性值的实现方法

CSS3 属性读写概述

众所周知，CSS3 引入了大量新属性，这使得在前端开发中读写这些属性变得不如以往简便。

例如：

<div style="

left:100px

"></div>

如果仅考虑行内样式，获取属性值只需使用 div.style.left，设置时同样只需赋值 div.style.left='100px'，操作十分简单。

webkitTransform 的设置与获取

然而，随着 CSS3 的普及，情况发生了变化。

例如：

<div style="

-webkit-transform: translate(20px,-20px)

"></div>

面对这种情况，许多开发者可能会感到困惑。

设置属性时依然简单：

只需遵循驼峰命名法，通过 div.style.webkitTransform='translate(20px,-20px)' 即可进行设置。

但在获取属性时：

div.style.webkitTransform 返回的是一个字符串，例如 'translate(20px,-20px)'。

提取变换数值的方法

那么，如何从中提取所需的 X 和 Y 值呢？经过搜索，并未找到简单的内置方法，通常只能依靠字符串截取或正则匹配来实现。

我们可以编写一个正则表达式来提取所需的数值，例如 20 和 -20。

使用 reg=/\-?[0-9]+/g 可以匹配负号和整数。

若数值可能包含小数点，则使用 reg2=/\-?[0-9]+\.?[0-9]*/g 进行匹配。

接着，利用 match 方法进行搜索：

div.style.webkitTransform.match(reg) // 结果 [20, -20]

上述操作将返回一个包含 X 值和 Y 值的数组。

同理适用于其他变换：

-webkit-transform: skew(20deg,-50deg); /* skew(相对x轴倾斜,相对y轴倾斜)*/

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

此外还有各种其他变换属性。