获取应用的 css 属性标识符答案

【问题标题】：Get the applied css property-identifiers获取应用的 css 属性标识符
【发布时间】：2013-01-18 09:52:46
【问题描述】：

如何从元素（不包括值）中获取当前应用的CSS 属性标识符？

或者更确切地说：如何获取元素，例如translate、skew、rotate 或 rect？我不是指完整的返回字符串，例如：rect(300px 0px 0px 300px)。我的意思是property-identifiers...

我对 RegExp 不是很熟悉，但也许可以解决这个问题？

所以为了更好的解释目的：

我需要检查一下，更改一些值（通过矩阵数组）并再次将它们重新应用回元素。

// http://stackoverflow.com/a/5968313/1250044
function matrixToArray(matrix) {
    return matrix.substr(7, matrix.length - 8).split(', ');
}

$("#foo").css("clip","rect(300px 0px 0px 300px)");
var matrix = matrixToArray($("#foo").css("clip"));

                              // If `#foo` has something else
                              // applied than `clip`, then
                    --- ˅ --- // is that not really dynamically
$("#bar").css("clip", "rect(" + matrix[0] + matrix[1] + matrix[2] + matrix[3] + ")");

【问题讨论】：

可以用jQuery检测。
@Pete 阅读我的问题，我需要没有值的属性...
也许这会对你有所帮助stackoverflow.com/questions/1004475/…

标签： javascript css properties matrix transform

【解决方案1】：

你可以使用window.getComputedStyle():

// your elemenet
var el;

// get the transformations applied:
var transform = window.getComputedStyle( el ).transform;

但是，在大多数情况下，这将为您提供matrix，而不是应用的单个转换。

【讨论】：

【解决方案2】：

例如，

$(ele).css('rotate')

要检测，检查返回长度是否>0

$(ele).css('rotate').length

【讨论】：

这并不能真正回答我的问题；）

【解决方案3】：

知道了……

很简单：

var getIdentifier = function(str) {
    return str.split('(')[0];
};

getIdentifier( 'rect(300px 0px 0px 300px)' ) // => 'rect'

【讨论】：