jQuery .css() function not returning expected values

Question

Alright, I\'ve search the jQuery docs (needs somebody devoted to maintaining), I\'ve searched SO, and I\'ve searched Google. I can\'t find the answer to this question.

Answer 1

This is not a complete answer to your question but it may be a working solution to caclulate the em values. I adapted this function from here. And here is the updated fiddle.

$.fn.emWidth = function(){
    var wpx = this.width();
    var temp = $('<div />').css({
        width:'1em', 
        position: 'absolute'
    });
    this.append(temp);
    var oneEm = temp.width();
    temp.remove();
    var value = wpx/oneEm;
    return Math.round(value*100)/100;
};

Answer 2

In the jQuery manual it is stated:

The difference between .css(width) and .width() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px).

Seems like the behaviour of .css() was changed in version 1.3, or at least it seems like that from the bug tracker.

I was trying to find a good (not hacky) solution also, but I haven't been able yet.

Also on SO.

Answer 3

jQuery always* returns dimensions such as width in units of pixels. Perhaps you can borrow the code from this px to em conversion tool to help you get the value you want.

It looks like 1.4.2 is the most recent version that will still return $(this).css('width') in its assigned unit of measure, but seemingly only if the width is assigned in the style attribute of the element's tag. If it's in a separate CSS declaration like your example, it comes back as pixels still.

$(this).width() remains to be in pixels.

(*in versions 1.4.3 and later)

Answer 4

jQuery now uses a cssHooks feature for certain .css() requests, width and height in particular.

So the width() function and the .css('width') both run through the same code on occasion.

Answer 5

if you define the style inline then you can use document.getElementById("myObj").style.width to retrieve the value as it is defined in the inline style

http://jsfiddle.net/yAnFL/14/

I'm not sure how to grab the value from an external sheet though.

Answer 6

As some others have stated, jQuery now uses hooks to intercept evaluation of some css properties. Here is a general solution that lets you get css and bypass those hooks.

$.fn.hooklessCSS = function(name) {
    var hooks = $.cssHooks;
    $.cssHooks = {};
    var ret = $(this).css(name);
    $.cssHooks = hooks;
    return ret;
}