ansaurus

Question

How to read individual '-webkit-transform' values in JavaScript?

Answer 1

A:

This link from Apple Dev Reference might shed more light on the subject:

The webkitTransform property is a string representation of a list of transform operations. Usually this list contains a single matrix transform operation. For 3D transforms, the value is "matrix3d(...)" with the 16 values of the 4x4 homogeneous matrix between the parentheses. For 2D transforms, the value is a "matrix(...)" string containing the 6 vector values.

michael 2010-08-08 02:11:54

Answer 2

A:

Since you only get the final matrix value from the computed style, you might have to check the element's inline style or stylesheet rules. If element.style.webkitTransform gives you nothing, you might to iterate through the document's stylesheets, and see which one matches your element. Then you can regex the webkitTransform property to get/set the value.

syockit 2010-08-08 03:57:12

Answer 3

+2 A:

I thought of one possibility. If you're prepared to parse strings in JavaScript, use

data=document.getElementById("myDiv").getAttribute("-webkit-transform");

then interpret data.

kalyanji 2010-08-08 10:50:22

Answer 4

A:

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:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Get style</title>
    <style>
    div {
        margin: 2em;
        padding: 2em;
    }
    #myDiv {
        -webkit-transform: scale(1.1) rotateY(7deg) translateZ(-1px);
        border: 1px solid;
    }
    </style>
</head>
<body>
    <div id="myDiv">
        Just testing.
    </div>
    <div id="output">
    </div>
</body>
</html>

robertc 2010-08-08 20:51:39

ansaurus

tags:

views:

answers:

How to read individual '-webkit-transform' values in JavaScript?

related questions