12

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

easwee
  • 15,757
  • 24
  • 60
  • 83
stecb
  • 14,478
  • 2
  • 50
  • 68
  • Good question, do older versions report the correct `%` value? – Chad Dec 05 '11 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 Dec 05 '11 at 15:32
  • I get 10% with Firefox 7.0 on Windows XP – Emre Erkan Dec 05 '11 at 15:56
  • @EmreErkan thanks! I tried on ffox 7.0 on mac os, but I get 47px.. it's really weird – stecb Dec 05 '11 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 Dec 05 '11 at 16:03

4 Answers4

6

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.

georg
  • 211,518
  • 52
  • 313
  • 390
  • mmm I don't get it.. why on other browsers u get the % value then? And (as @EmreErkan reported) why on firefox 7 on windows u get the % value as well? – stecb Dec 05 '11 at 16:11
  • this is probably because the specs (http://www.w3.org/TR/DOM-Level-2-Style/css) don't foresee any way to obtain specified values. See also this similar question: http://stackoverflow.com/questions/1013478/mapping-computed-css-styles-to-specified-ones – georg Dec 05 '11 at 16:51
  • I tried at home with my personal computer (Windows 7, Firefox 7) and get `px` values. – Emre Erkan Dec 05 '11 at 19:33
3

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.

stecb
  • 14,478
  • 2
  • 50
  • 68
1

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;
tildy
  • 979
  • 10
  • 20
  • I use ff/chrome/opera and I get the % ... I don't want to make calculations, I just want to know if it's possible to get the value of a css property (expressed in %) :) – stecb Dec 05 '11 at 16:12
  • Okey, I have tried on mine, and I got a pixel size in opera too. – tildy Dec 05 '11 at 16:26
  • This is baaaad :) .. I mean, same version but different OS, it has completely different behav.. weird.. thanks btw :) – stecb Dec 05 '11 at 17:12
  • Please, can you explain the calculation? Why css(left) / window.width * 100? Where does this come from? – gedamial Oct 21 '17 at 15:10
0

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

Fergus Cameron
  • 1