Get the applied css property-identifiers

Question

How can i get the currently applied CSS property-identifiers from an element (excluding the value)?

Or rather: How to get the elements e.g. translate, skew, rotate or rect? I don't mean the complete returned string like: rect(300px 0px 0px 300px). I mean just the property-identifiers...

I'm not a really familiar with RegExp but maybe can that do the trick?

So for better interpretation purposes:

I need to check for that, change some values (via matrix-array) and reapply them back to the element again.

// 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] + ")");

@Pete Read my question, I need the property without values... — yckart, Jan 18 '13 at 10:01
Maybe this will help you http://stackoverflow.com/questions/1004475/jquery-css-plugin-that-returns-computed-style-of-element-to-pseudo-clone-that-el — Morpheus, Jan 18 '13 at 10:22

score 0 · Answer 1 · answered Jan 18 '13 at 09:56

You can use window.getComputedStyle():

// your elemenet
var el;

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

This will, however, get you a matrix in most of the cases and not the individual transformations applied.

score 0 · Answer 2 · answered Jan 18 '13 at 10:00

0

E.g.,

$(ele).css('rotate')

To detect, check if the return length >　0

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

answered Jan 18 '13 at 10:00

taox

55
5

That does not answer my question really ;) – yckart Jan 18 '13 at 10:13

yckart · Accepted Answer · 2013-06-23T14:17:55.663

0

Got it...

Quite simple:

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

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

edited Jun 23 '13 at 14:17

answered Jan 18 '13 at 10:26

yckart

32,460
9
122
129

Get the applied css property-identifiers

3 Answers3