Determining the current em size

Forum Moderators: open

Message Too Old, No Replies

Determining the current em size

Javascript?

Tonearm

3:23 am on Jun 26, 2006 (gmt 0)

How can I determine the pixel value for the current em size on a page? Is javascript the way to do this?

- Grant

penders

4:35 pm on Jul 6, 2006 (gmt 0)

Yes, you can use JavaScript to get at the font size property for the element. BUT... Although Firefox and Opera always seem to return the pixel size (as a string "NNpx"), IE will return the size in whatever unit it was defined, if this was em's then it will be "Nem" - not so good.

Also, it is not as straight forward as simply reading the style property (as this only reflects the value of inline styles). AND the property name you need to read differs from IE (fontSize) and Firefox, Opera (font-size).

Peter-Paul Koch (www.quirksmode.org) perfectly describes how to generically read styles from elements. For a complete explanation, see:
[quirksmode.org...]

I've modified Paul's function to specifically return the font size of the passed element (id), which works in IE, Firefox and Opera - but check what IE returns in your case!



function getFontSize(el) {
 var x = document.getElementById(el);
 if (x.currentStyle) {
  // IE
  var y = x.currentStyle['fontSize'];
 } else if (window.getComputedStyle) {
  // FF, Opera
  var y = document.defaultView.getComputedStyle(x,null).getPropertyValue('font-size');
 }
 return y;
}alert('returned font size = ' + getFontSize('my_id'));

Hope that helps.

(ASIDE: In posting code fragments... is there any way to preserve (exactly) the white-space/indentation? I am using sqbr-pre and sqbr-code tags but a lot of the white space is being stripped)

Tonearm

2:48 pm on Jul 7, 2006 (gmt 0)

Thanks!

- Grant

Tonearm

12:40 am on Jul 11, 2006 (gmt 0)

Hi penders,

I wrapped your code in <script type="text/javascript"></script> but it doesn't return anything to the page. I've never used javascript before so I have no idea what I'm doing here. How can I get the value returned to the page?

Also, is there a way to determine the actual pixel height of a div? That would be the pixel height of the div after it has been stretched vertically with rows of text.

- Grant

RonPK

1:37 pm on Jul 11, 2006 (gmt 0)

Re: determining the actual height of a div: there are several properties that may be a of interest, such as offsetHeight and clientHeight. offsetHeight often suits me best. Have a look at [msdn.microsoft.com...] for more info.

penders

3:00 pm on Jul 11, 2006 (gmt 0)

I wrapped your code in <script type="text/javascript"></script> but it doesn't return anything to the page.

Yes, that should do the trick, but you need to replace my_id (in the last line that starts "alert...") with the value of the id tag for the element you are trying to examine ie.:

'mydiv' or 'mybody' in this case.

With the code above you should get a message box popup informing you of the value it finds. What do you ultimately want to do with this value? Display it in the body of the page somewhere? Or use it in further calculations?