Lesson 10
Using JavaScript with Styles
HTML and JavaScript
BASICS, 4th Edition
1
Barksdale / Turner
Objectives


Lesson 10

Define a simple frame-based style viewer.
Make your style viewer functional.
Define a simple frame-based document
viewer.
Make your document viewer functional.
Create a dynamic style class viewer.

2
Barksdale / Turner

HTML and JavaScript BASICS 4E
Vocabulary


Lesson 10

element
getElementById()
getElementsByTag
Name()
id

3
Barksdale / Turner




location
render
style
style viewer
HTML and JavaScript BASICS 4E
Defining a Style Viewer
Lesson 10

4

The HTML style attribute can be applied to
virtually any HTML tag to describe how you
want the Web browser to display that portion of
the Web page.
Although styles are by no means limited to text,
applying a style to an HTML tag is one of the
most common ways in which styles are
applied.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Defining a Style Viewer
(continued)

Lesson 10

5
The term render simply means to display with
the proper attributes applied.
An element is just an HTML tag, and once you
have identified the element you need to modify,
you make it accessible to JavaScript by
assigning it an identifying name with the id
attribute.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Defining a Style Viewer
(continued)
A style viewer is a simple tool that allows users to
specify a style, apply the style, and then view the
results.
Lesson 10

Frame-based style viewer
6
Barksdale / Turner
HTML and JavaScript BASICS 4E
Making Your Style Viewer
Functional
Lesson 10

7

If a JavaScript event occurs in one frame and
the effect of the event is within the same
frame, then the JavaScript code should reside
in the same frame file.
If a JavaScript event occurs in one frame and
affects an object or element in a different
frame, the code can often be kept to its
simplest form if it is defined in the top-level
frameset file.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Making Your Style Viewer
Functional (continued)
Lesson 10

8
In order for JavaScript code to access an
HTML tag with an id attribute, a corresponding
JavaScript method called getElementById()
must be invoked. This method accepts a
single parameter, the id of the HTML element
you want to access.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Defining a Frame-Based Document
Viewer
A simple document viewer that moves
hyperlinks and headers out of the original
HTML document and places them in their own
frame adds functionality to a Web page.
Lesson 10

9
Barksdale / Turner
HTML and JavaScript BASICS 4E
Defining a Frame-Based Document
Viewer (continued)
Lesson 10

10
As shown in Stepby-Step 10.3, the
document viewer
approach makes the
H2 headers more
accessible and
highlights the active
header.
Barksdale / Turner
Frame-based document viewer
HTML and JavaScript BASICS 4E
Making Your Document Viewer
Functional
The process of making a document viewer
Web page functional is similar to making your
style viewer functional.
Lesson 10

Functional document viewer—
Fancy Fonts selected
11
Barksdale / Turner
HTML and JavaScript BASICS 4E
Making Your Document Viewer
Functional (continued)

Lesson 10

12

The JavaScript code in this section uses the
getElementById() method to identify and access
the modified HTML elements.
A new function uses the JavaScript
getElementsByTagName() method to reference an
array of HTML elements to which a cascading style
has been applied.
The location property simply contains the URL of
the current HTML document.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Creating Dynamic Content with
JavaScript Style Classes

Lesson 10

13
You can define many different style attributes
in a style class within a Cascading Style
Sheet.
The style class is then applied, by means of
the class attribute, to an HTML element, and
all of the attributes in the class take effect
simultaneously.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Creating Dynamic Content with
JavaScript Style Classes (continued)
JavaScript can accomplish the same effect by
changing the style class assigned to a Web
page element.
Lesson 10

Functional style class viewer—
final state
14
Barksdale / Turner
HTML and JavaScript BASICS 4E
Lesson 10
Summary
15
In this lesson, you learned:
 How to define a simple frame-based style
viewer.
 How to make your style viewer functional.
 How to define a simple frame-based document
viewer.
Barksdale / Turner
HTML and JavaScript BASICS 4E
Summary (continued)

Lesson 10

How to make your document viewer
functional.
How to create a dynamic style class viewer.
16
Barksdale / Turner
HTML and JavaScript BASICS 4E