Detect the current font size ? [Archive]

Orange Gold

01-05-2011, 06:43 AM

I have a button (in html) and I want the center of the button to be on the center of the line I'm typing on... I was just putting it inside a span and then using this code to move it down.

<span style="position:relative; bottom:-10;">

It worked great!
But... once I started allowing my users to change the font sizes the buttons got bigger and they needed to be moved down further...

if the font size was +1:

<font size="+1"><span style="position:relative; bottom:-10;">

if the font size was +6:

<font size="+6"><span style="position:relative; bottom:-27.5;">

So is there a way in javascript to detect the current font size and then adjust the span position based off of that?
If I can just get the number of the current font size I can do all the rest of the coding, I just need a way to figure out the current font size and put it in a variable... I was thinking of using something like 1.0em so that it stays the same but then we have a basis of measuring off of but I have no clue.. I'm fairly new to javascript.

Thanks!

vwphillips

01-05-2011, 09:22 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
font-Size:21px;
}

/*]]>*/
</style></head>
<body>
<span id="tst" >TEXT</span>
<script type="text/javascript">
/*<![CDATA[*/
function zxcSV(obj,par){
if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}

function zxcSVInt(obj,par){
if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
}

obj=document.getElementById('tst');

alert(zxcSV(obj,'font-Size'));
alert(zxcSVInt(obj,'font-Size'));
/*]]>*/
</script>
</body>

</html>