How can I get the font size of text in elements within a webpage

Question

edit: The problem seems to be that the font size isnt explicitly set and is set by the css class only. so style.fontSize always returns an empty string

if there another way to return the font size?

var allMainFrameElems = parent.main.document.getElementsByTagName('*');

for (i=0; i < allMainFrameElems.length; i++){
                if(allMainFrameElems[i].style.fontSize != null){
                        alert(llMainFrameElems[i].style.fontSize);
                }
}

Answer 1

If the fontSize style in not explicitly set on an element (eg <p style="font-size:12pt;">...</p> ), you won't be able to get it from anywhere. Font-sizes are most often set in your CSS classes, which are not reachable from your element's properties, and the elements do not have any font-size related properties.

Answer 2

In order to even come close to doing this you will need to do some tricks and will not be able to definatively determine font size. Basically you will have to manipulate the page a great deal on every element (not good) just to determine this.

See this fiddle page, especially the pixelPerEm function I tossed together very quickly. http://jsfiddle.net/MarkSchultheiss/vc8Zy/

It is not very clean at the moment and IF I get time I might try to make it better but it might give you something to start with even if it is NOT very pretty.

EDIT: basic explanation is to utilize the em css, inject an element with a known setting, calculate the pixel offset on the injection and then remove the injected element. None of that is pretty and all of it is error/bug prone or has potential for issues.