How to use Javascript to change font size & color?

[ian0411]

Hi All,

I am new to the website design world. I really love it. But I have a problem about how to link my web page to a separate .js file.

In my web page, I have 5 links. The problem I have is to use Javascript to make a rollover type of effect (I know how to use CSS but my task is to make JavaScript work on this part). I want to change fonts to 14px and blue color when the mouse hovers. And change it back when the mouse out.

Here are my codes in the web page:

<li><a href="home.aspx" title="home">home</a></li>
<li><a href="contactinfo.aspx" title="contactinfo">contactinfo</a></li>
<li><a href="customerservice.aspx" title="customerservice">customerservice</a></li>
<li><a href="feedback.aspx" title="feedback">feedback</a></li>
<li><a href="myaccount.aspx" title="myaccount">myaccount</a></li>

Can anyone show me how to write a Javascript code into a separate file and make this work and what/where to add the code in my HTML web page? I really appreciate your help.

Thanks,

Ian

[VIPStephan]

You create a new file in any text editor and write this code:

window.onload = function() {
if(document.getElementById('nav')) {
var li = document.getElementById('nav').getElementsByTagName('li');
for(i=0;i<li.length;i++) {
var a = li[i].firstChild;
a.onmouseover = function() {
this.style.color = 'red';
this.style.fontSize = '20px';
}
a.onmouseout = function() {
this.style.color = 'blue';
this.style.fontSize = '14px';
}
}
}
}


You save that file as JavaScript file (with the .js extension) and include it in the head of your HTML document using the standard method (I’m not gonna explain everything to you, Google is your friend). Oh and this script assumes your list has the ID “nav”.

But you really should do this with CSS rather than JS.

[Phcameron]

A script can also be an external file that uses the SRC attribute to identify the name of the JavaScript file:
<SCRIPT LANGUAGE="JavaScript" SRC="JavaScriptCode.js">

you can save the JavaScriptCode.js in the same folder as your html file and this will point right to it.

the key is the line

SRC="JavaScriptCode.js"

[ian0411]

Thanks VIPStephan and PHcameron. Sorry to ask you guys one more question.

I created a file called jquery.js to store the code that VIPStephan provided. Here is my revised code in HTML:

<div>
<script src="jquery.js" type="text/javascript" language="javascript">
<li id="nav"><a href="home.aspx" title="home">home</a></li>
<li id="nav"><a href="contactinfo.aspx" title="contactinfo">contactinfo</a></li>
<li id="nav"><a href="customerservice.aspx" title="customerservice">customerservice</a></li>
<li id="nav"><a href="feedback.aspx" title="feedback">feedback</a></li>
<li id="nav"><a href="myaccount.aspx" title="myaccount">myaccount</a></li>
</script>
</div>

I couldn't make it work. Please shed me some lights again.

Thanks!

[ian0411]

YES, I made it. Now it works. I watched many videos in youtube to see how to do the DOM trick. I understand the concept now. Thank you very much for the help. You guys are the best.

Ian

[VIPStephan]

There are many tutorials on where to write the <script> element on the internet. However, one more note: Don't use the language attribute! That’s deprecated. You’d only use <script type="text/javascript">.