Introduction to Dynamic HTML: Inline Styles
August 24, 1998
Speaking non-strictly, we can say that an "inline
style" is a style which applies only to an individual
element rather than all elements of a certain type or
class. Typically, an inline style is defined using the
STYLE attribute for the element's tag; e.g.
<H2 STYLE="color:blue;">.
Within MSIE, then, you can use JavaScript to modify an
inline style at any time. The modification will take
effect on-screen immediately. You do this using the Style
Object, which we looked at earlier with
Dynamic Positioning.
The Style Object in MSIE's DOM supports every property which
CSS supports for styles. However, the property names
differ slightly between CSS syntax and DOM syntax. Fortunately,
the naming differences follow a rule. Consider
the CSS property font-weight. The corresponding Style
Object property is named fontWeight. Similarly,
the CSS property text-align maps to the Style Object
property textAlign. Of course, color
retains the same name in both syntaxes. As you can see, then,
CSS property names simply lose their hyphen and capitalize
the first letter following the hyphen when used in JavaScript syntax.
So, then, confusing though that might sound, let's look at an
example which illustrates just how easy changing
styles can be. Imagine that you have the following HTML element:
<P ID="selectrule" ALIGN="left" STYLE="color:blue; font-weight:normal;">
Please select one item below.
</P>
Now, some series of events occur and the user fails to
follow instructions. So, you'd like to emphasize the
exhortation:
document.all.selectrule.style.color="red";
document.all.selectrule.style.fontWeight="bold";
When the above statements are executed, the text associated
with the element named selectrule will become
red and bold. Of course, you can set the element back to its
original state by setting color back to "blue"
and fontWeight back to "normal".
Notice that our JavaScript statements are modifying the styles
directly associated with the particular element.
You can always do this, even if the element's style wasn't
defined inline, but was inherited from a class or global
style sheet. No matter how the element gained its original
style, whether inline or by style sheet, directly modifying
the style in the above manner only applies to the individual
element. For this reason, this form of JavaScript
dynamic styles is always an inline style.
Introduction to Dynamic HTML: Dynamic Styles
Introduction to Dynamic HTML
Introduction to Dynamic HTML: Changing the Rules
|
