Javascript Change Fonts

Javascript Change Fonts

We'll start by using Javascript to change fonts on the entire page. To do this, we'll create a body tag and two links.

NOTE: If you copy and paste this code, watch out for spaces and line returns put in by the browser, like after the getElementById.

<body id=hey>

<a onMouseover=document.getElementById('hey').style.fontFamily='courier'> Make me COURIER!</a> ----
<a onMouseover=document.getElementById('hey').style.fontFamily='verdana'> Make me VERDANA!!!</a>

-In our HTML body tag, we name our id attribute hey because we like the name.
-We create two links that use the Javascript onMouseover event handler.
---After the equals sign:
-----document - this page
-----getElementById - Javascript's built-in method that will get elements from our page.
-----In the parenthesis - we state that we will be working on the hey element of our page.
-----We then call the Javascript style object.
-----We then call the fontFamily property of the style object.
-----We say make it courier.

NOTES: We used single quotes, but we could have used double since we lazily didn't enclose our entire onMouseover in double quotes. Had we done that, the single quotes would have been required.

THE GREAT PART. We can use this same bit of code, with minor tweeks, to change all kinds of things on our page. Like background colors:

<body id=hey>
<a onMouseover=document.getElementById('hey').style.backgroundColor='red'> Make me Red!</a> ----
<a onMouseover=document.getElementById('hey').style.backgroundColor='green'> Make me GREEN!!!</a>

-We just changed the style object to backgroundColor and we have a blinding background changer.

We can change paragraphs of text:

<p id=hey>This is my fabulous text that will change when you mouseover the stuff below.</p>
<a onMouseover=document.getElementById('hey').style.fontFamily='courier'> Make it COURIER!</a> ----
<a onMouseover=document.getElementById('hey').style.fontFamily='verdana'> Make it VERDANA!!!</a>

Even change tables!... Suddenly I feel like that guy selling Oxy-Cleaner or some such thing... but it does really really work!

<table id=hey border=1><tr><td>
<a onMouseover=document.getElementById('hey').style.backgroundColor='red'> Make me Red!</a> ----
<a onMouseover=document.getElementById('hey').style.backgroundColor='green'> Make me GREEN!!!</a>
</td></tr></table>

Of course we can use this with all kinds of event handlers as well as in functions we write. Here we'll use the onClick event handler:

<p id=hey>This is my fabulous text that will change when you CLICK the stuff below.</p>
<a onClick=document.getElementById('hey').style.fontFamily='courier'> Make it COURIER!</a> ----
<a onClick=document.getElementById('hey').style.fontFamily='verdana'> Make it VERDANA!!!</a>

One more for fun. Change font size:

<p id=hey>This is my fabulous text that will change when you CLICK the stuff below.</p>
<a onClick=document.getElementById('hey').style.fontSize='10'> Make it Tiny!</a> ----
<a onClick=document.getElementById('hey').style.fontSize='24'> Make it HUGE!!!</a>

There's a link here and below to a long list of style object properties that will give you even more power to bring all your web pages to life.

Resources:
irt.org - Style Object Properties
Javascript onMouseover
onClick Javascript
Javascript Change Background Colors
Javascript Change Font Size

Previous Article: Javascript Alert

Next Article: Javascript Change Font Size