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.