• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Hour 17. Working with Style Sheets > Workshop: Creating Dynamic Styles

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. Listing 17.3 shows a basic form using <select> tags to define options for head and body colors.

Listing 17.3 The Form for the Dynamic Styles Example

 1:  <FORM NAME="form1">
 2:  <B>Heading color: </B>
 3:  <select name="heading" onChange="changehead();">
 4:     <option value="black">Black</option>
 5:     <option value="red">Red</option>
 6:     <option value="blue">Blue</option>
 7:     <option value="green">Green</option>
 8:     <option value="yellow">Yellow</option>
 9:  </select>
10:  <br>
11:  <B>Body text color: </B>
12:  <select name="body" onChange="changebody();">
13:     <option value="black">Black</option>
14:     <option value="red">Red</option>
15:     <option value="blue">Blue</option>
16:     <option value="green">Green</option>
17:     <option value="yellow">Yellow</option>
18:  </select>
19:  </FORM>


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint