HTML and CSS Reference
In-Depth Information
14.11 Where Does JavaScript Fit In?
14.11.1 What Is DHTML?
DHTML stands for Dynamic HTML. It is not a programming language, but a technique
used when HTML/XHTML, CSS, and JavaScript (and Ajax) work together to make up a
dynamic interactive Web page. With CSS we were able to control the style (i.e., color,
font, margins, etc.) of the HTML elements and store the style sheets in separate files. All
by itself, CSS is presenting a style for your page, but now we need JavaScript to bring the
Web page to life, to make it dynamic. Throughout this text we have been using event
handlers and functions with JavaScript to create rollovers, slideshows, animation, sub-
mit forms, and so on. In the next chapter we discuss how to access every element on a
Web page with the DOM. Then you can apply CSS styles and JavaScript to the DOM ele-
ments to create what will effectively make it possible to manipulate, create, and delete
any part of your page on the fly.
14.11.2 How JavaScript Views Style Sheets
Sometimes a page consists of more that one style sheet. When the page is loaded, all
external and embedded style sheets are stored in an array in the order in which they are
placed within the document, just as are images, forms, and links. The array is called
styleSheets , a property of the document object, so document.styleSheets[0] is the first
style sheet, normally the general style sheet for the entire page. The next style sheet,
maybe one that uses the @import rule, would be document.styleSheets[1] , and if you
embedded another style within the document, that would be document.styleSheets[2] .
Because each of the elements of the styleSheets array has a disabled property that can be
turned on and off, you can dynamically toggle between styles, allowing a user to select
a style suited to his or her own taste. It is also possible to access a specific rule within a
style sheet by using the W3C cssRules array or the Microsoft rules array. Both arrays
work with index numbers. The first rule is cssRules[0] , the second one cssRulse[1], and
so on. Example 14.27 contains two style sheets, one that is imported and one that is
embedded. By using JavaScript the user can toggle between two styles. When reverting
to the first style, one of the rules is changed; that is, the rule for the h1 selector is
changed to purple.
<style type="text/css">
@import url("pstyle.css");
Search WWH ::

Custom Search