View Full Version : How do I pass variable to change font size, etc.

01-12-2004, 01:58 AM
I would like to be able to change the font size and color using variables. For example, let's say I have the following variables:

var myfontsize=10
var myfontcolor="00FF00"

Now, I want to put these variables in the code that displays"Hello world"

<p><font color="#FF0000" size="6">Hello World</font></p>

I've tried different methods of putting these variables in, but it never works. Either I am doing something wrong or I have failed to put in some special coding. Any ideas?

01-12-2004, 04:00 AM
It is possible to do with Javascript (I'll use the onMouseOver event as an example):

<p><font color="#FF0000" size="6" onMouseOver="color='myfontcolor'">Hello World</font></p>

but a much better option is to use CSS (Casscadign Style Sheets). This goes in between the <HEAD> and </HEAD> section of your webpage:

<style type="text/css">
#new-id { font-size: 10pt; color: #00FF00; }

It then depends on the event that triggers the change in the font. Again I'll use the mouseover event.

<p><font color="#FF0000" size="6" onMouseOver="id='new-id'">Hello World</font></p>

Or, you could just say <p><font color="#FF0000" size="6" onMouseOver="style='font-size: 10pt; color: #00FF00'">Hello World</font></p>

Hope this helps


01-13-2004, 12:15 AM
Thanks for your response. Although your coding will not work with the project I had in mind, I will be able to use it on another project. Thanks.

Here is a little more info on the project I had in mind. I'm creating some variables (font size and color) on Page1 and passing them over to Page2. I want to be able change the font color and size on Page2 depending on what happens on Page1. Therefore, I would need to have the changes take place as soon as page2 opens (or immediately after).

I'm not even sure this is possible, but I would appreciate any help or input you can provide.

01-13-2004, 03:34 AM
Then you just document.write it wherever you want it placed.

<script type="text/javascript">
document.write('<font color="'+myfontcolor+'" size="'+myfontsize+'">Hello World</font>');

Since font tag is deprecated, you can use span and CSS.

document.write('<span style="color:'+myfontcolor+';font-size:'+myfontsize+'pt">Hello World</span>');

01-13-2004, 11:47 PM
Yep, that worked great. That allows me to change the size of everything that I need to change except for one thing. I have one more piece of text that I still need to adjust. This piece of text is a bit more tricky to adjust.

Basically, I have a counter that counts the number of seconds that accumulate. The display on this counter is what I need to be able to adjust. I need to be able to increase and decrease in size of the number (plus change the color). Listed below is the coding for the counter. The problem I have run into is I don't know how to use the "document.write" approach to change the font size and color. The counter uses the "<input type= " approach to display the number. Any ideas on how to do this? Once again, I want to thank you for helping me with the other problems.

<table border="0" width="311" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
<td align="center" width="305"><form name="d">

<input type="text" size="7" name="d2" style="font-family: Arial MT Black; font-size: 60pt; text-align: center; color: #FF0000;

padding: 0"></p>

var newstart=100
var milisec=0
var seconds=newstart
function display(){
if (milisec>=9){

Number.prototype.insertComma = function(){
var s = this.toString();
var temp = '';
for (var i=s.length-1;i>=0;i-=3){
if ((i-3)>=0) temp = "," + s.substr(i-2, 3) + temp;
else temp = s.substring(0, i+1) + temp;
return temp;

document.d.d2.value = seconds.insertComma() + "." + milisec

01-14-2004, 02:08 AM

var newstart=100
var milisec=0
var seconds=newstart
document.d.d2.style.fontSize=sizeVariable + 'pt'; //or 'px' or whatever dimension

I noticed that the insertComma() function (which I believe is my code :)) is nested in another function. You should take it out so that you can call it anywhere in the page.

01-14-2004, 03:40 AM
You're right Glenn, the insert comma function was yours. In fact, I might have to call this the Glenn counter system because of all of your help.

Your last suggestion took care of the problem with the font size and color. I have one last issue that deals with altering the counter display. I tried to use the same approach to the character width (the number of characters the counter field will hold). As you can see from the code below, the code is:


This means that the field will hold up to 7 characters. I need to be able to increase and decrease that number. I tried the following code, but that didn't work:


Any ideas? Listed below is the same code I posted in my previous message:

<input type="text" size="7" name="d2" style="font-family: Arial MT Black; font-size: 90pt; text-align: center; color: #FF0000; padding: 0"></p>

01-14-2004, 11:21 PM
Thanks again guys for your help. I was able to try different variations of the coding and found the answer. Basically, this is what I found: The first coding is simular to what I need to use to change the color and font size. (it uses the .style. )


However, I discovered that I can't use the .style. portion in the coding. Listed below is the coding that I found that works:


Thanks again for your help.