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 -> /):

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

or jQuery (demo -> /):

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

or by plain js (demo -> /):

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

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

• javascript
• jquery
• css
• mootools

• Good question, do older versions report the correct % value? – Chad Commented Dec 5, 2011 at 15:20
• I tried on a VM running ffox 5.0 , and it logs 67.7px .. :/ ..on IE it's correct (10%) ..later I ll try with ff 6-7, but I don't think it will work. – stecb Commented Dec 5, 2011 at 15:32
• I get 10% with Firefox 7.0 on Windows XP – Emre Erkan Commented Dec 5, 2011 at 15:56
• @EmreErkan thanks! I tried on ffox 7.0 on mac os, but I get 47px.. it's really weird – stecb Commented Dec 5, 2011 at 15:59
• @EmreErkan 47px obv depending on the width of the window... it's weird coz it should be a known (and fixed if it's there since 5.0) bug :) – stecb Commented Dec 5, 2011 at 16:03

4 Answers 4

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.

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.

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;

on chrome it depends on the the position value fixed and absolute always give a px whilst other values output what was put in for example if you gave it 10% value then it would output 10% and if you put in 100px then it would output 100px