This property is an important reference to a DOM level 2 style object which can be accessed from script to dynamically alter the appearance of an HTML element.

The Element.style property yields an object that contains the style settings for the HTML element. By modifying the properties of this style object belonging to the HTML element, you can affect the display of the element. It is as if the element owned a miniature style sheet of its own. This may be affected by the settings of the CLASS tag attribute on the HTML tag that instantiates the Element object; we will come back to that in a little while.

You can replace the style object with another you have created separately or defined in the stylesheet, and by doing this you can effect a considerable change in appearance of an object in one hit without needing to change several properties individually.

Style management is quite complex and offers many more capabilities than using HTML tags and attributes. You should be able to completely abstract any appearance related controls away from the HTML document at the cost of it not working on older browsers.

The complexity stems from there being an inheritance mechanism and the possibility of having many style objects attached to a document at different points. There is a hierarchy of style objects, each overriding another. Ultimately the appearance you see is the accumulation of all of those style controls cascaded down to your element.

You can try to alter a style property on an object only to see it remain the same as it was before. Styles are attached to objects at different points in the DOM tree and some style properties are inherited. So you could be altering a style property that is being masked. This can be quite frustrating.

Each HTML element in the DOM structure has a style property that points at a style object. Style objects may be shared by referring to the same one from several elements.

The style object is documented extensively elsewhere with a topic describing each of its properties. For now, let's look at some simple style manipulation. You can access the style properties of an element as simply as this:

myElement.style.color = "red";

That's it, aside from learning about all of the different style properties that are available and their values. You'll need to look at how styles are inherited down the DOM document tree.

Styles can be put into style sheets and pulled in from a shared document in a <LINK> tag. Access to those style objects is a little more complicated because you need to locate the object representing that <LINK> tag, then navigate through the StyleSheet object to find the rules that describe each named style block. Those rules are associated with your element by means of the CLASS HTML tag attribute. Having located the rule for your element object (and these would be shared between many objects), you can examine the rule object and access it's style property. That points at a style object that is just like the one your Element.style property would have pointed at.

You can also specify the styles inline, that is you can add a STYLE HTML tag attribute to the tag that instantiates your element object. That would be reflected in the properties of a private style object that your Element.style property refers to.

MSIE supports two additional properties that relate to the cascaded style on an element. They are called currentStyle and runtimeStyle. The currentStyle property points at an object that holds the accumulated style, taking into account linked stylesheets, tag attributes and anything else that can affect style appearance apart from any script driven changes. The runtimeStyle property takes the currentStyle property and accumulates appearance changes when styles are modified on an object, so it represents the visual style as it is now. Neither of these are portable though, and they are not part of the DOM standard and so they should be avoided.

To learn more about styles and how they work you might want to go through this learning sequence:

• Build a document with HTML tag driven appearance, just like you always used to.

• Now remove all its appearance control and introduce STYLE HTML tag attributes and put in some CSS style control.

• If you prefer, use a <LINK> tag to call in a style sheet and build some even more complex style controls.

• Now explore the document hierarchy by looking at individual HTML Elements and inspecting their style objects.

• Try enumerating the style objects to inspect their properties.

• Then try modifying those properties.

• By this stage, you should now be pretty much an expert at modifying style and appearance.

Support for styles is part of the DOM level 2 specification which the MSIE and Netscape 6.0 browsers support (at least in part). While it's at recommendation stage, it could change. Browsers may implement it incorrectly or introduce bugs inadvertently. Because of that uncertainty, we have covered what seems to work and what we expect to become available, but things may change with new browser versions. There is a lot still to explore and test with Netscape 6.0, and MSIE 6.0 is on the horizon too.