http://www.strictly-software.com/CSSStyleObject.asp


Element.extend({
/**
* Calculates the absolute measurement of the style e.g. "pixels".
* Fails on % values, original value is returned instead.
* @param {String} property : CSS property to be read
*/
getStylePx: function(property){
var PX = /^\d+(px)?$/i;
var value = this.getStyle(property);
if (PX.test(value)) {return parseInt(value);}
if (value.indexOf("%") > -1) {return value;}
var style = this.style.left;
var runtimeStyle = this.runtimeStyle.left;
this.runtimeStyle.left = this.currentStyle.left;
this.style.left = value || 0;
value = this.style.pixelLeft;
this.style.left = style;
this.runtimeStyle.left = runtimeStyle;
return value;
}
});


Internet Explorer returns (as defined in the Stylesheet)
fontSize: 110% and lineHeight: 1.4

Firefox returns pixel values for both. While this is OK for the font size, it means that you cannot get lineHight from one element and assign it to another element…

P.S.: Nice trick, Dean. Have to remember that one.

I needed this function a few days ago when I was trying to calculate the width of an element and having no success in getting it to work cross browser. Thanks Dean.

This trick works by setting style.left and then getting MSIE to convert it by calling style.pixelLeft. To stop the element moving around the screen when we do this, we set runtimeStyle.left with the current left value. After we’ve done the conversion we set everything back to the way it was.

Clear?