CODEWITHSUNDEEP
javascriptjquerycssmootools
stecb
stecb

Reputation: 14746

Retrieving percentage CSS values (in firefox)

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

Upvotes: 12

Views: 5477

Answers (4)

Fergus Cameron
Fergus Cameron

Reputation: 1

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

Upvotes: 0

stecb
stecb

Reputation: 14746

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.

Upvotes: 5

georg
georg

Reputation: 214949

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.

Upvotes: 6

tildy
tildy

Reputation: 1009

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;

Upvotes: 2

Related Questions