css library

[Robert]

Hi,

I would like to know if there exists a javascript library (at least for
IE and Firefox) that let me get css properties in a more structured way.
I would like to have a css value that seperates the size/length value
from the type. For example:
width: 2.5em
size=2.5
type=em

And most importantly I would like a way to convert each such value into
pixels.

Does it exist? I am aware of the CSSStyleDeclaration and related methods
in Firefox.
If not, is it possible to convert such a value as 2.5em into pixels in
javascript? Sometimes the standard available methods that return pixels
cannot calculate the value I need. For example calculating the border size.

Robert.

[RobG]

Robert wrote:

Hi,

I would like to know if there exists a javascript library (at least for
IE and Firefox) that let me get css properties in a more structured way.
I would like to have a css value that seperates the size/length value
from the type. For example:
width: 2.5em
size=2.5
type=em
function getCSSValueAndUnit( cssValue )
{
var bitObj = {};
bitObj.size = cssValue.replace(/[a-z]+/i,'');
bitObj.type = cssValue.replace(/^\d+(.\d+)?/,'');
return bitObj;
}

var cssBits = getCSSValueAndUnit('2.5em');
alert( 'size = ' + cssBits.size + '\n'
+ 'type = ' + cssBits.type);
If it's likely that you'll ever get something like "2.em" (which
shouldn't happen as far as I know unless the value is retrieved from
something other than a DOM object), then you may need:

bitObj.size = cssValue.replace(/\.?[a-z]+/i,'');
bitObj.type = cssValue.replace(/^\d+[.]?(\d+)?/,'');

And most importantly I would like a way to convert each such value into
pixels.

Ah, now that would be a trick! Search the archives, I'm sure there are
some very kludgy methods but you'll likely not be happy with any of them.

[...]

--
Rob

[mrhoo]

The em value is based on the default body font-size, which is set by the user; either directly in the browser or in the OS display preferences.

firefox always returns it in pixels, but ie and opera can return it in pts or
ems or even percentages or constants-xx-large, for example.

One way to get the pixel size of an em in IE is:
1. create a (visibility hidden) absolutely positioned div with a width of 1em
and a height of auto; font-size of 1em, line-height of 1 and padding and margins of 0.
Append it to the body.
2. append a text node to the div with 2 (space delimited) letters in it:'M M'
3. get the offsetHeight of the div
4. replace the 'M M' with M;
5. get the new offsetHeight
6. the em height in pixels is pretty close to #3-#5
7. remove the div and it's children and save the value