How to read/parse individual transform style values in JavaScript?

Question

Webkit\'s blog post from last year on 3D transforms explains the various transform \'functions\' that can be used in the -webkit-transform property. For example:

<         


        

Answer 1

I think, as syockit says, iterating through the stylesheets is the only way to go, you can use webkitMatchesSelector to discover rules which match your element:

var theRules = new Array();
var theStylesheet = document.styleSheets;
if (document.styleSheets[0].cssRules)
        theRules = document.styleSheets[0].cssRules
else if (document.styleSheets[0].rules)
        theRules = document.styleSheets[0].rules

var elem = document.getElementById("myDiv");

for (var i=0; i < theRules.length; i++) {
    if (elem.webkitMatchesSelector(theRules[i].selectorText)) {
        var theStyles = theRules[i].style;
        var j = theStyles.cssText.indexOf('-webkit-transform:');
        if (j>-1) {
            var s = theStyles.cssText.substring(j,theStyles.cssText.length).indexOf(';'); 
            document.getElementById("output").innerHTML=theStyles.cssText.substring(j+18,s);
        }
    }
}

This assumes markup something like this, I added some extra rules and values to make sure I was pulling out the right values. If you have more than one stylesheet then you need to adjust the first part to iterate through all the stylesheets too, and you'll probably have to deal with specificity if your -webkit-transform appears in more than one rule:

    
    
    


    

        Just testing.