3

So I'm looking to get the value of a CSS property that the browser doesn't support. This is something I'd like to use to create a polyfill, but I need to know the value of the property at any given time.

Here's a test file with all the methods I've tried so far. Bascially, given the following:

#element {
    transform: rotate(2deg);
}

I'd like to be able to, via JavaScript, get the value rotate(2deg) regardless of whether or not the browser supports it. Is this possible? And if so, is there a preformant way to do it (I will need to do this a lot in older browsers)?

Some preferences if it is possible:

  • Would prefer to do this from an element, instead of looping through a stylesheet's rules
  • Need to support IE 7 at least (or have methods to do so)
  • Shouldn't take 2 seconds to calculate. I'd like something that will preform decently
thirtydot
  • 224,678
  • 48
  • 389
  • 349
LoveAndCoding
  • 7,857
  • 2
  • 31
  • 55
  • 4
    Possible duplicate of this question: http://stackoverflow.com/q/249991/527096 – potench Jun 26 '12 at 22:52
  • 1
    If the browser doesn't support the property, I can't see how else you can find its value other than by searching for it in a style sheet (which isn't that hard and fairly quick). You could apply the rule directly through the element's style attribute, but I suspect you don't want to do that. – RobG Jun 26 '12 at 22:57
  • @RobG The main issue with searching in the stylesheet is that the value may change and that is an expensive operation. I'd like to be able to adjust values when things like `:hover` are triggered without needing to parse a file everytime. – LoveAndCoding Jun 26 '12 at 22:59
  • The script here does it http://code.google.com/p/ie7-js/ this script is used to make older browsers work like newer ones. But dose not seem to have transform. May be you can add it. Or learn from how it works. – ctrl-alt-delor Jun 26 '12 at 23:02
  • I edited your jsFiddle using something from another link I found. I could get it to read transform in IE 8. But FF3 returned blank, and Chrome returned null...it might be a start... – sacredfaith Jun 26 '12 at 23:51
  • Assuming `transform` isn't just an example and that you're trying to polyfill the functionality in [the browsers that don't support `transform`](http://caniuse.com/transforms2d)... you're pretty much reinventing the wheel: [cssSandpaper](http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/). I don't remember where, but the author has said something along the lines of: "the reason I went with `-sand-transform` as opposed to plain `transform` is because my implementation does not quite match the spec". – thirtydot Jun 27 '12 at 00:07

1 Answers1

2

I was able to retrieve the value in your demo with jQuery in Firefox:

var match = $( 'style' ).html().match( /transform:\s*(.+);?/ );
var value = match ? match[1] : '';

Live demo: http://jsfiddle.net/fnF2V/5/

Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
  • 1
    Of course, unless there's only ever going to be one `transform` declaration which is guaranteed to belong to `#element`, this won't be very useful. – BoltClock Jun 27 '12 at 00:24
  • 1
    @BoltClock It's a start `:)` The accepted answer in the thread this is a possible duplicate of, states that it is not possible at all. The purpose of my answer is to show that it *is* possible. – Šime Vidas Jun 27 '12 at 00:26