[DUNSEL]

I know other languages have a method like getFontSize() or similar, but does anyone know how to return the current css font size of an element in javascript?

[Chris O'Brien]

Assuming the font size is set explicitly by something like

Code:
<div id="hi" style="font-size: 12px">hi there</div>

then just doing

Code:
var el = document.getElementById("hi").style.fontSize;

will work. if you just want the number rather than the string of '12px' just use parseInt().

I should note that Moz is a little bit smarter than Safari, because it allows you to obtain fontSize from setting style="font: 12px verdana" rather than having to use font-size: 12px like you need to in Safari. I did the above because it works in both Moz and Safari...

Hope that helps

[DUNSEL]

Thanks mate, but that was the 1st thing I tried. No dice. Does the size have to be inline like that, or can it be in an embedded ss?

[Synotic]

This isn't directly answering your question since I don't know what you're trying to do but... in CSS you can use the "em" unit which is essentially the current font size. So making a box 5em when the font-size is 12px makes the box 60px wide, it also adapts whenever the user changes the font-size. But this may not be what your looking for so whatever

[DUNSEL]

Yeah, apparently it does work, but only if the style rules are inline. Unfortunate.

[Chris O'Brien]

So are you using classes to set the font size on each element? If so - I may have a solution. Try something like this:

Code:
function getFontSize(what) {
			
	var el = document.getElementById(what);
	var fs = el.style.fontSize;
			
	if (fs == "") {
			
		var cn = el.className;
		var ss = document.styleSheets;
				
		for (var i=0; i < ss.length; i++) {
				
			for (var j=0; j < ss[i].cssRules.length; j++) {

				if (ss[i].cssRules[j].selectorText.indexOf(cn) != -1) {

					fs = ss[i].cssRules[j].style.fontSize;
					break;
							
				}
					
			}
				
		}
			
	} 
			
	return fs;

}

so that in another function you can just do:

Code:
var el = getFontSize('some_elements_id');

It works in Safari 1.2 and Moz/firefox. Don't know about anything else, because I don't know their DOM support and can't test...

Obviously - the function will need extending if the element doesn't have a class associated with it - you'd need to go back up the document tree to find out where it inherits it's font size from...

Anyhoo - that was a nice little break from working. Hope it helps

[DUNSEL]

Thanks, that's more work than it's worth, though. I managed to achieve the larger objective another way, which was to make font size dynamic depending on window size. Just thought if I could return the current font size easily, it would cut down the coding, but obviously not so. So instead I came up with a fading slideshow that works in browsers other than IE. IE has it's own built-in filter for that.