Question

I try to find the css rotation of one element and then apply it to another element. How would I go about that? The CSS for reference (but it could be any rotation or even any transform) :

#firstelement { transform: rotate(90deg); }

I don’t find anything in the element.style object of the first element. Any ideas?

Answer 1

If you want to retrieve styles that may be set via CSS, you have to fetch them in a little more involved way (that is different for IE and everyone else) than just reading the style property. Here’s a function that can do that:

function getStyle(el, styleProp) {
    if (el.currentStyle) {
        // look for IE
        return(el.currentStyle[styleProp]);
    } else if (window.getComputedStyle) {
        // all other browsers
        return(document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp));
    } else {
        // fall back to inline style
        return(el.style[styleProp]);
    }
}

var val = getStyle(document.getElementById("firstelement"), "transform");

Keep in mind you will have to manage the vendor-specific prefixes for some CSS3 settings.

You can see an example here that will work in Chrome or Safari: http://jsfiddle.net/jfriend00/JfC2V/ (it’s coded for the webkit prefixes).