Sams Teach Yourself JavaScript in 24 Hours

By Michael Moncur

• Table of Contents
  • Copyright
  • About the Author
  • Acknowledgments
  • We Want to Hear from You!
  • Reader Services
  • Introduction
  • Part I: Getting Started
  • Hour 1. Understanding JavaScript
  • Hour 2. Creating a Simple Script
  • Hour 3. How JavaScript Programs Work
  • Part II: Learning JavaScript Basics
  • Hour 4. Using Functions and Variables
  • Hour 5. Using Strings and Arrays
  • Hour 6. Testing and Comparing Values
  • Hour 7. Repeating Yourself: Using Loops
  • Hour 8. Using Math and Date Functions
  • Part III: The Document Object Model (DOM)
  • Hour 9. Working with the Document Object Model
  • Hour 10. Responding to Events
  • Hour 11. Using Windows and Frames
  • Hour 12. Getting Data with Forms
  • Hour 13. Using Graphics and Animation
  • Part IV: Moving on to Advanced JavaScript Features
  • Hour 14. Creating Cross-Browser Scripts
  • Hour 15. Creating Custom Objects
  • Hour 16. Working with Sounds and Plug-Ins
  • Hour 17. Debugging JavaScript Applications
  • Part V: Working with Dynamic HTML (DHTML)
  • Hour 18. Working with Style Sheets
    • Style and Substance
    • Defining and Using CSS Styles
    • Using CSS Properties
    • Creating a Simple Style Sheet
    • Using External Style Sheets
    • Controlling Styles with JavaScript
    • Workshop: Creating Dynamic Styles
    • Summary
    • Q&A
    • Quiz
    • Exercises
  • Hour 19. Using Dynamic HTML (DHTML)
  • Hour 20. Using Advanced DOM Features
  • Part VI: Putting It All Together
  • Hour 21. Improving a Web Page with JavaScript
  • Hour 22. Creating a JavaScript Game
  • Hour 23. Creating DHTML Applications
  • Hour 24. JavaScript Tips and Tricks
  • Part VII: Appendices
  • Appendix A. Other JavaScript Resources
  • Appendix B. Tools for JavaScript Developers
  • Appendix C. Glossary
  • Appendix D. JavaScript Quick Reference
  • Appendix E. DOM Quick Reference

Workshop: Creating Dynamic Styles

Using the DOM style objects, you can create a page that allows you to directly control the colors used in the page's text. To begin with, you will need a form with which to select colors. The following is a basic form using <select> tags to define options for head and body colors:

<FORM NAME="form1">
<B>Heading color: </B>
<select name="heading" onChange="changehead()">
   <option value="black">Black</option>
   <option value="red">Red</option>
   <option value="blue">Blue</option>
   <option value="green">Green</option>
   <option value="yellow">Yellow</option>
</select>
<br>
<B>Body text color: </B>
<select name="body" onChange="changebody()">
   <option value="black">Black</option>
   <option value="red">Red</option>
   <option value="blue">Blue</option>
   <option value="green">Green</option>
   <option value="yellow">Yellow</option>
</select>
</FORM>

Notice that this form uses onChange attributes in the <select> tags to call two functions, changehead and changebody, when their respective selection changes. Next, you will need to create these functions. The following script defines the style changing functions:

<script language="Javascript" type="text/javascript">
function changehead() {
  i = document.form1.heading.selectedIndex;
  headcolor = document.form1.heading.options[i].value;
  document.getElementById("head1").style.color = headcolor;
}
function changebody() {
  i = document.form1.body.selectedIndex;
  doccolor = document.form1.body.options[i].value;
  document.getElementById("p1").style.color = doccolor;
}
</script>

This script first defines the changehead function. This reads the index for the currently selected heading color, then reads the color value for the index. This function uses the getElementById method described in the previous section to change the color. The changebody function uses the same syntax to change the body color.

Last but not least, you will need some basic HTML, including a heading and some body text to be changed by the functions. Listing 18.2 shows the complete HTML document, including the script and form you created earlier.

Example 18.2. The complete dynamic styles example

<HTML>
<HEAD>
<TITLE>Controlling Styles with JavaScript</TITLE>
<script language="Javascript" type="text/javascript">
function changehead() {
  i = document.form1.heading.selectedIndex;
  headcolor = document.form1.heading.options[i].value;
  document.getElementById("head1").style.color = headcolor;
}
function changebody() {
  i = document.form1.body.selectedIndex;
  doccolor = document.form1.body.options[i].value;
  document.getElementById("p1").style.color = doccolor;
}
</script>
</HEAD>
<BODY>
<h1 ID="head1">
Controlling Styles with JavaScript</h1>
<hr>
<p ID="p1">
Select the color for paragraphs and headings using the form below.
The colors you specified will be dynamically changed in this document.
The change occurs as soon as you change the value of either of the
drop-down lists in the form.
</p>
<FORM NAME="form1">
<B>Heading color: </B>
<select name="heading" onChange="changehead()">
   <option value="black">Black</option>
   <option value="red">Red</option>
   <option value="blue">Blue</option>
   <option value="green">Green</option>
   <option value="yellow">Yellow</option>
</select>
<br>
<B>Body text color: </B>
<select name="body" onChange="changebody()">
   <option value="black">Black</option>
   <option value="red">Red</option>
   <option value="blue">Blue</option>
   <option value="green">Green</option>
   <option value="yellow">Yellow</option>
</select>
</FORM>
</BODY>
</HTML>

Notice that the <h1> tag has an ID attribute of "head1", and the <p> tag has an ID of "p1". These are the values the script uses in the getElementById function.

To test the dynamic styles script, load Listing 18.2 into the browser. Select the colors, and notice the immediate change in the heading or body of the page. Figure 18.2 shows a typical display of this document after the colors have been changed.

Figure 18.2 The dynamic styles example in action.

Share This