« Return to Thread: .css() px vs. em

Re: .css() px vs. em

by Luke Lutman :: Rate this Message:

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 />, <img />)
> * 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@...
>> http://jquery.com/discuss/
>
>
> _______________________________________________
> jQuery mailing list
> discuss@...
> http://jquery.com/discuss/

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

« Return to Thread: .css() px vs. em