Re: .css() px vs. em

Luke Lutman wrote:

Here it is as a plugin (I don't have IE handy, but it the IE part of the
code works in FireFox):

Example:
$('#example').px('font-size'); -> '12px'

Plugin:
(function($){
       
        var $px = $(document.createElement('div')).css({
                position: 'absolute'
        });

        $.fn.px = function(prop) {
                var val;
                if($.browser.msie) {
                        $px
                        .clone()
                        .css('width', this.css(prop))
                        .appendTo(this[0])
                        .each(function(){
                                val = $(this).width() + 'px';
                        })
                        .remove();
                } else {
                        val = this.css(prop);
                }
                return val;
        };

})(jQuery);

Luke

Luke Lutman wrote:
> I've run into the same problem with IE :-(
>
> I did more or less what Dave suggested (untested, of course!):
>
> var $tmp = $('#some-element')
>      .append('<div style="position: absolute; width: ' +
> $('#some-element').css('font-size') + ';" />')
>      .find(':last-child')
>
> var fontSizeInPx = $tmp.width();
>
> $tmp.remove();
>
> This would work for other units (i.e. in, pt) and other properties
> (text-indent, line-height) too.
>
> Some things to watch out for:
> * the element you want to measure must be able to have children (i.e.
> not <br />, )
> * this method makes the browser to two extra re-flows (I think?)
> * make sure the appended div doesn't pick-up any funny business from the
> cascade.
>
> Luke
>
> Dave Methvin wrote:
>>>  Firefox is returning the value in pixels while IE6 is returning
>>> the value in ems. Is this a bug?
>>  
>> It's just IE being IE. Other browsers have getComputedStyle which tells
>> you the dimensions in pixels. IE has currentStyle; although that does
>> tell you the current style (taking the CSS cascade into effect) it
>> returns whatever dimensions were given in the style rule. jQuery's
>> .css() method uses whatever it's dealt by the browser.
>>  
>> I think I've seen IE hacks where you can put a box around a character
>> and then measure the box in pixels to get the font size, but my
>> Google-fu is weak at the moment.
>>
>>
>> ------------------------------------------------------------------------
>>
>> _______________________________________________
>> jQuery mailing list
>> discuss@jquery.com
>> http://jquery.com/discuss/
>
>
> _______________________________________________
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/


_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/