Introduction to Dynamic HTML: Changing the Rules
August 24, 1998
Modifying the style of an individual element is very precise,
but sometimes you may want to have a more global
effect: perhaps you'd like to modify a style defined by a style
sheet as a class or global style. Such a modification
would have a ripple-effect, immediately re-rendering all elements
on the page which are subject to that style sheet.
Below is a style sheet definition which specifies two styles: a
global style which applies to all <H3>
element (blue, arial font family, large size), and a generic
style class named warning (red, bold, italic)which
will apply to any element which uses that class.
<STYLE ID="sheet1">
H3 { color:blue; font-family:"Arial"; font-size:large; }
.warning { color:red; font-weight:bold; font-style:italic; }
</STYLE>
Your goal, once the document has been rendered according to the
above style sheet, is to modify this style sheet
via JavaScript such that any changes are dynamically reflected
on-screen. To do this, you'll need to learn some
new terminology. Each "style definition" in the
style sheet is known as a
"rule". Thus,
the line defining the style for H3 is one rule, while the
line which defines the warning class is a second
rule.
In Microsoft's Document Object Model, you access a style
sheet through the styleSheets[] array (aka "collection").
A single style sheet is defined as everything between a set
of <STYLE>...</STYLE> tags. The above
example,
then, is one style sheet. If it were the first instance of
such tags in your source code then it would be the first
style sheet, as well. You access the first style sheet via
JavaScript using the reference:
document.styleSheets[0]
That said, within each styleSheet object is a rules collection.
This array contains an entry for each rule within
the style sheet. Therefore, you would access the first rule --
the H3 rule -- of this style sheet as:
document.styleSheets[0].rules[0]
And the second rule -- the warning class -- as:
document.styleSheets[0].rules[1]
Now, before this grows ever more baffling, let me add that each
rule object possesses a style object. And it
is through that style object which you can modify the rule.
What?? Example: You want to change the H3 rule in this
example so that its color becomes yellow:
document.styleSheets[0].rules[0].style.color="yellow";
Now you want to change this rule's font family to courier:
document.styleSheets[0].rules[0].style.fontFamily="courier";
You can modify any style property for the rule, even one which
wasn't specified in the original style sheet.
Thus, if you'd suddenly like to make all H3 text on the page italic:
document.styleSheets[0].rules[0].style.fontStyle="italic";
Any of the above JavaScript statements will apply the changes
to all <H3> elements on the page. Similarly,
making any changes to the style object for the warning
class rule (document.styleSheets[0].rules[1].style.property)
will apply all changes to any tags which specify the attribute
CLASS="warning"; e.g. <P CLASS="warning">.
Clearly, dynamic styles are extremely powerful, allowing you to
alter the look of a page in seconds. A particularly
interesting style property you should investigate is display.
This property allows you to set whether a
style is rendered at all or not. An un-rendered style will not
take up any screen space, but if you later change
the display property from "none" to
"block", any element with that style
will suddenly appear. The rest of the page is automatically
re-rendered to accommodate the new content. This differs
from an invisible block precisely because the entire page
expands and contracts to accommodate the presence or absence
of the content contained with the style.
Introduction to Dynamic HTML: Inline Styles
Introduction to Dynamic HTML
Introduction to Dynamic HTML: The Event Connection
|
