web space | free hosting | Business Hosting Services | Free Website Submission | shopping cart | php hosting
Third Lesson

Document Properties

There are many properties that can be used with document in JavaScript. You have already used the write method with document and now you will learn about using properties. A few other properties include bgcolor, fgcolor, title, and location.

There are other properties (and methods for that matter), but we can start with these. Let's practice.

What do you think the following line would do:
<INPUT TYPE = Button VALUE = "Colour One" Onclick = "document.bgColor = 'Red'">
You have to consider the syntax when writing this code (as well as all code). The Onclick parameter needs to be in double quotes (") and the bgcolor needs to be in single quotes. The VALUE sets what text is in the Button. The Onclick sets the document background color to Red. You can also use Hex values in place of colors (Red=

What do you think fgColor does? Doesn't take a genious it changes your foreground color (Text)

Here is an example of some buttons that change the foreground and background:

<INPUT TYPE = Button VALUE = "Background Red" Onclick = "document.bgColor = '#FF0000'">
<INPUT TYPE = Button VALUE = "Background Blue" Onclick = "document.bgColor = '#0000FF'">
<INPUT TYPE = Button VALUE = "Foreground Red" Onclick = "document.fgColor = '#FF0000'">
<INPUT TYPE = Button VALUE = "Foreground Blue" Onclick = "document.fgColor = '#0000FF'">
<INPUT TYPE = Button VALUE = "Title Change" Onclick = "document.title = 'You Changed the title'">
<INPUT TYPE = Button VALUE = "Doc Loc" Onclick = "alert(document.location)">

This produces:

JavaScript Tutorial Home
Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7 Lesson 8 Lesson 9 Lesson 10 Lesson 11 Lesson 12 Lesson 13 Lesson 14 Lesson 15 Lesson 16 Lesson 17 Lesson 18 Lesson 19 Lesson 20

Useful Links

Contact Webmaster

000000 0000FF 00FF00 00FFFF FF0000 FF00FF FFFF00 FFFFFF
000000 000044 000088 0000BB 0000FF 004400 008800 00BB00 00FF00 440000 880000 BB0000 FF0000
000000 004444 008844 00BB44 00FF44 004488 008888 00BB88 00FF88 0044BB 0088BB 00BBBB 00FFBB 0044FF 0088FF 00BBFF 00FFFF
000000 440044 880044 BB0044 FF0044 440088 880088 BB0088 FF0088 4400BB 8800BB BB00BB FF00BB 4400FF 8800FF BB00FF FF00FF
000000 444444 884444 BB4444 FF4444 444488 884488 BB4488 FF8888 4488BB 8888BB BB88BB FF88BB 4488FF 8888FF BB88FF FF88FF

This page shows you how to use Javascript in buttons to change the background, foreground, and even the title.