Previous Example-|-Next Example-|-Return to Chapter Listing

Example 14.13:
A Few Style Examples

[This example works with Netscape Navigator 4. It won't work with Netscape Navigator 2 or 3, or Internet Explorer 3.]

This document contains a few examples of JavaScript styles.

Here's a normal H2 header.

... and an H3.

Now we'll use the style tags to modify the H2 and H3 headers, including giving the H3 text a background color...

Here's another level 2, in a different color.

... and a level 3.

Now we'll use a class to modify color and font weight, and create a tag that changes text background color...

Here's a brightly displayed paragraph.

This level 3 header can also be made bright.

Here's a paragraph with some bright text in the middle.

Here's a bright level 2 header.

This paragraph has both a class and an ID.

Now we'll create a more complicated class that creates a box around text that it's applied to, and an ID that applies space around the text...

This is a normal paragraph.

This text paragraph has a border, because the box class has been applied.

This text paragraph has a border, and larger space around the text, because it has both the box class and the padded ID.


Here are all the text and style tags: <H2> Here's a normal H2 header. </H2> <H3> ... and an H3. </H3> <i>Now we'll use the style tags to modify the H2 and H3 headers, including giving the H3 text a background color...</i> <STYLE TYPE="text/javascript"> tags.H2.color = "red" tags.H3.color = "purple" tags.H3.backgroundColor = "#00ffff" </STYLE> <H2> Here's another level 2, in a different color. </H2> <H3> ... and a level 3. </H3> <i>Now we'll use a class to modify color and font weight, and create a tag that changes text background color...</i> <STYLE TYPE="text/javascript"> classes.bright.all.color = "orange" classes.bright.all.fontWeight = "bold" classes.bright.H2.color = "gold" ids.onBlack.backgroundColor = "black" </STYLE> <P CLASS="bright"> Here's a brightly displayed paragraph. </P> <H3 CLASS="bright"> This level 3 header can also be made bright. </H3> <P> Here's a paragraph with <SPAN CLASS="bright"> some bright text </SPAN> in the middle. </P> <H2 CLASS="bright"> Here's a bright level 2 header. </H2> <P CLASS="bright" ID="onBlack"> This paragraph has both a class and an ID. </P> <i>Now we'll create a more complicated class that creates a box around text that it's applied to, and an ID that applies space around the text...</i> <STYLE TYPE="text/javascript"> classes.box.all.borderTopWidth = "1em" classes.box.all.borderRightWidth = "6pt" classes.box.all.borderBottomWidth = "12px" classes.box.all.borderLeftWidth = 24 classes.box.all.borderStyle = "3D" ids.padded.paddingTop = "12pt" ids.padded.paddingBottom = "12pt" ids.padded.paddingLeft = "24pt" ids.padded.paddingRight = "24pt" </STYLE> <P> This is a normal paragraph. </P> <P CLASS="box"> This text paragraph has a border, because the box class has been applied. </P> <P ID="padded" CLASS="box"> This text paragraph has a border, and larger space around the text, because it has both the box class and the padded ID. </P>
Previous Example-|-Next Example-|-Return to Chapter Listing