Help with getting fontSize on body tag

Adam Risser · Jun 8, 2007

Hi, I am writing a function to change the font-size but I am running
into a snag. I cannot get the current font-size of the body. Here is
a link to a simplified test case

http://mustang.millersville.edu/~wstudent/cewing/mu/test.php

You would think that it would alert 72.5% when you click the resize
button, but it alerts nothing. If i add the style to the body tag
(style="font-size: 72.5%;" ), then it works.

Here is the test case code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<script type="text/javascript">

function resizeText()
{
alert(document.getElementsByTagName('body')[0].style.fontSize);
}

</script>
<style type="text/css">

body {
background: transparent url('../img/bg_pattern.gif') repeat 0 0;
font-size: 72.5%;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif
}

</style>
</head>
<body>

<p>Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test</p>

<p>Text Resize  <a href="#" id="grow"
onclick="resizeText()">A<sup>+</sup></a> </p>

</body>
</html>

Thanks in advance!

scripts.contact · Jun 8, 2007

Adam said:
Hi, I am writing a function to change the font-size but I am running
into a snag. I cannot get the current font-size of the body. Here is
a link to a simplified test case

http://mustang.millersville.edu/~wstudent/cewing/mu/test.php

var body=document.body;
var fs=
(
body.currentStyle||
(window.getComputedStyle&&getComputedStyle(body,null))||
body.style
).fontSize;
alert(fs);

Adam Risser · Jun 8, 2007

var body=document.body;
var fs=
(
body.currentStyle||
(window.getComputedStyle&&getComputedStyle(body,null))||
body.style
).fontSize;
alert(fs);

Thank you for your help. When I put that in an onload function, it
returns the size in pixels.
I am looking hopefully to just return whatever font-size is set in the
css. (In this case, 72.5%)

I have no real idea how that snippet works, but it is interesting

Thanks again!

rf · Jun 9, 2007

Hi, I am writing a function to change the font-size

Ctrl mouse wheel?

Adam Risser · Jun 13, 2007

Ctrl mouse wheel?

I am looking to have A+ and A- buttons on the site so people can
change the font who do not know about Ctrl mouse wheel

dmark · Jun 20, 2007

Thank you for your help. When I put that in an onload function, it
returns the size in pixels.
I am looking hopefully to just return whatever font-size is set in the
css. (In this case, 72.5%)

I have no real idea how that snippet works, but it is interesting
Thanks again!

No dice unless you use an inline style attribute on the body tag (not
a good idea.) Regardless, this is a waste of time; leave the font
sizing to the user agent.

RobG · Jun 20, 2007

I am looking to have A+ and A- buttons on the site so people can
change the font who do not know about Ctrl mouse wheel

Most will tell not to try, users can change the font size themselves a
number of ways. On a 33cm screen at 1280x800px I have the default
font set to 18pt, on a 48cm screen at 1280x1024px I have it set to
14pt. I can use ctrl+"plus" to make it bigger at any time I like, ctrl
+"minus" to make it smaller.

But since you wont heed that advice, use CSS and modify a style rule
that sets the body's font size in percentage. Some browsers will
report the font size in whatever units were used to set it, others
will report in whatever unit they wish, regardles of what was used to
set it. You will need to test thoroughly.

Make 'Image X' spin 360deg on y-Axis until reset button clicked	1	Jan 22, 2023
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Help with code	0	Jun 12, 2022
Need help with code on website (noob)	2	Jul 18, 2022
Can't execute php to delete multiple rows in database	3	May 14, 2023
Help with my responsive home page	2	Dec 14, 2022
I'm about to get in trouble with the HTML <body></body> tags	10	Aug 12, 2023
JS - prevent keypress bubbling to child with listener on parent?	8	Oct 11, 2011

Help with getting fontSize on body tag

Adam Risser

scripts.contact

Adam Risser

rf

Adam Risser

dmark

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads