referencing external stylesheet using JavaScript

**kathyc** · 07-01-2008, 08:04 PM

Hi,

I have a web page that calls an external stylesheet.
When the user clicks the increase or decrease or increase font button, I would like the font size of my PageHeading class to increase or decreasing accordingly.

How do I reference my PageHeading class defined in my external stylesheet
in the code?

Here is my PageHeading class inside my stylesheet...

This code references the entire web page, but I only want the PageHeading class to increase.

.PageHeading
{
color : "#003399";
font-family : Arial, Helvetica, sans-serif;
font-size : 16px;
font-weight : bolder;
font-style : normal;
}

Here is the javascript code.

function resizeText(multiplier)
{
if (document.body.style.fontSize == "")
{
document.body.style.fontSize = "1.0em";
}
document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
}

Any help would be appreciated.

**magicyte** · 07-01-2008, 10:54 PM

A reference to your .css would be used as follows:

<link rel="stylesheet" type="text/css" href="your_external_file_here.css"/>

A reference to your .js would be used as follows:

<script type="text/javascript" src="your_external_file_here.js">

<!--

-->

</script>

Note that the comment tags () in between the <script> tags are for older browsers. No need to take those out. Of course you would need to include this code in the <head> part of your <html> document.

This should help.

-magicyte

**magicyte** · 07-01-2008, 10:56 PM

About the header... I didn't see that before I posted my previous post. I do believe that you must insert <span> tags saying:

<span class="PageHeading">Page Heading</span>

If you have already done that, I do not know what you were talking about.

-magicyte

Thread: referencing external stylesheet using JavaScript

Thread Tools

Search Thread

referencing external stylesheet using JavaScript

Alas... The Solution!

Bookmarks

Bookmarks

Posting Permissions