CODEWITHSUNDEEP
javascriptjquerycss
user849137
user849137

Reputation:

jQuery .css returns back css property in pixels, when its actually in percentages

I'm trying to get the value of the left property (which is in percent) using the .css method in jQuery:

var my_value= $("div").css("left");

Problem is, the above returns it in pixles...

Any idea on how I could get it to return the actual value of the property (which is in percentages)?

Upvotes: 17

Views: 12169

Answers (4)

Ken Sanders
Ken Sanders

Reputation: 56

Update: in IE 11, style.left no longer works. If you are trying to access inline style, use the prop() function and then specify the specific attribute you're looking for as an array key:

$("selector").prop("style")["left"];

will return the property in pixels

Upvotes: 4

bruchowski
bruchowski

Reputation: 5341

Just had this problem and managed to get it this way:

$('#mySelector').get(0).style.width;

returned me '100%'

however $('#mySelector').css('width');

returned me '900px'

Hope this helps someone

Upvotes: 6

Rory McCrossan
Rory McCrossan

Reputation: 337560

I don't think it's possible to get the width returned to you as a percentage, as the browser does the maths internally, and then only allows access to the resulting px value.

You can however work out the percentage once you know the width of the element, and the width of the relevant containing element, like this:

var elWidth = $('#myElement').width();
var containerWidth = $('#myContainer').offsetParent().width();
var elWidthPercent = 100 * elWidth / containerWidth;

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074355

If you're applying left inline, you can access it directly from style.left, e.g.:

var my_value = $("div")[0].style.left;

For me, on Firefox, IE, and Opera, that returns the percentage value where css returns the number of pixels. (On Chrome, I get the percentage either way.)

If you're applying left via a stylesheet, I don't believe there's any convenient way to get the information you're looking for. You can get it, but it's really inconvenient: By looking through all of the defined style rules, figuring which ones apply to the element, and parsing the rule text. You can access the stylesheets via document.styleSheets, which is an array of all of the stylesheets for the document. Each style sheet will have an array of rules it defines available as either cssRules or rules (depending on the browser). Each rule has a cssText property that gives you the text of the rule.

$.each(document.styleSheets, function(sheetIndex, sheet) {
    $.each(sheet.cssRules || sheet.rules, function(ruleIndex, rule) {
        var ruleText = rule.cssText;

        // Figure out if the rule applies, and parse out the value
    });
});

Not easy getting all of the CSS rules of specificity and such right, but possible, and not especially difficult for simpler cases.

For the inline style stuff, here's a live demo - In the demo, I have an absolutely-positioned div with left defined by an inline style and top defined by a stylesheet (so not inline).

Using Chrome 16:

css('left') says: 20%
style.left says: 20%
css('top') says: 10%
style.top says:

Using Firefox 10:

css('left') says: 193.2px
style.left says: 20%
css('top') says: 73.5px
style.top says:

Using IE9:

css('left') says: 239.8px
style.left says: 20%
css('top') says: 59.3px
style.top says:

The reason style.top is always blank is that style only reflects inline styles, but I included it for completeness.

Upvotes: 19

Related Questions