Retrieving percentage CSS values (in firefox)

Question

I have a problem retrieving the exact css property value (in '%') on firefox.

Suppose we have this extremely simple markup:

<div id="box">box</div>

and this css:

#box{
    width:200px;
    height:200px;
    left:10%;
    position:absolute;
    background:red;
}

and I'd like to retrieve the left position (in '%') by js

It's obv very easy with mootools (demo -> http://jsfiddle.net/steweb/AWdzB/):

var left = $('box').getStyle('left');

or jQuery (demo -> http://jsfiddle.net/steweb/RaVyU/):

var left = $('#box').css('left');

or by plain js (demo -> http://jsfiddle.net/steweb/tUAKA/):

function getStyle(el,styleProp){ //from ppk's quirksmode
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

var left = getStyle('box','left');

But if you try it on firefox (8.0.1) you'll see that the result is not correct (should be 10%, but it's 91px). The questions are: is there a bug on this newer version of firefox? Does anyone knows if it's a known bug? Am I doing something wrong?

Thanks :)

Update: I tried it also on older firefox releases, and it's not correct (it always returns px value).. for completeness, it works correctly on IE

Answer 1

This is documented:

The used value of any CSS property is the final value of that property after all calculations have been performed. Used values can be retrieved by calling window.getComputedStyle. Dimensions (e.g. width, line-height) are all in pixels... etc

There seems to be no way to access "specified" css values for a given element, unless you know exactly which css rule applies and parse out this rule using document.stylesheets or similar interface.

Answer 2

The correct answer is a comment on the bug I filed on bugzilla

https://bugzilla.mozilla.org/show_bug.cgi?id=707691#c7

To get the correct % value (on firefox too) the element's (or one of its parents) display should be set to none

Test : http://jsfiddle.net/4RKsM/

The unclear thing is: why on the same browser/version (see, firefox 7 on XP/win7 or Opera 11.5 on mac osx / ubuntu) but on different os, the behav is different?

Btw, the spec @thg435 posted (and reported on mdn) is still in flux.

Answer 3

As I know , it has never shown the percentage (I use ff, opera and chrome). So I think it's not only a firefox problem.

However, you can calculate it manually , but it is just close to the definied value , if the browser window is small.

parseInt($('#box').css('left'))/ $(window).width()*100;