The Style object is Internet Explorer 4.0 specific and can be used to retrieve any in-line styles applied to an element object by using the STYLE attribute. Note that it doesn't retrieve stylings set in embedded, or externally linked stylesheets. To obtain information about these, use the StyleSheets collection.

Properties
The Style object has a property for every possible style setting for element objects. Basically any style sheet attribute is a property of the Style object. The only difference is grammatical, in terms of hyphenation. Below is a complete list of Style object properties and their corresponding Style Sheet attributes. For more information about the values of the attributes/properties, see the respective Style Sheets topic.

The Style object also supports the following properties:

cssText
The cssText property returns a string containing the contents of the referenced elements STYLE attribute.

Note : The contents of the cssText property returns an alphabetically sorted and expanded list of the style sheet attributes set in the referenced elements <STYLE> attribute. For example, if an element contains STYLE="border-color:red", then the cssText property of the elements style object will return:

BORDER-BOTTOM-COLOR: red;BORDER-LEFT-COLOR: red;BORDER-RIGHT-COLOR: red;BORDER-TOP-COLOR: red

expanding the single shorthand border-color property into its constituent parts.

backgroundPositionX
The backgroundPositionX property returns only the x-coordinate of the background property (see above), which reflects a STYLE="background:..." settings within the referenced element.

backgroundPositionY
The backgroundPositionY property returns only the y-coordinate of the background property (see above), which reflects a STYLE="background:..." settings within the referenced element.

pixelHeight
The pixelHeight property returns or sets the height of the referenced element in pixels, regardless of its height unit setting in its stylings.

pixelLeft
The pixelLeft position sets, or reflects the horizontal offset (relative to the current viewing window) of the left-most edge of the referenced element. The value returned is always in pixels.

pixelTop
pixelTop is much the same as pixelLeft except that it returns, or sets the vertical offset of the referenced element, in pixels.

pixelWidth
Like pixelHeight, pixelWidth returns, or sets the width of the referenced element in pixels, regardless of its length unit settings in the styling.

posHeight
The posHeight property sets or retrieves the height of the referenced element in the same units as the elements height is defined in, in the styling. Dynamically setting this property will alter the displayed height of the element, but not alter the height units it uses for display purposes.

posLeft
The posLeft property sets or returns the referenced elements left-most position, relative to the current viewing window, in the units specified in the style sheet height attribute. Again, dynamically setting the posLeft property will move the referenced element, but not affect the length units it uses to position itself.

posTop
posTop is the same as posLeft, the only difference being that it deals with vertical offsets, not horizontal ones.

posWidth
posWidth returns or sets the width of the current, in the units specified in the stylings width attribute. Again, changing it alters the elements display, but leaves its width units unaffected.

Methods
The Style object accepts the standard Dynamic HTML Methods getAttribute, removeAttribute and setAttribute. See that topic for details.

© 1995-1998, Stephen Le Hunte

See also:

• http://www.zdnet.com/devhead/stories/articles/0,4413,2394731,00.html Allowing the users to change the style.
• http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html Really nice looking buttons with CSS and a background image.
• http://www.alistapart.com/articles/progressiveenhancementwithcss A very intellegent approach to maintaining complex CSS and applying it to different browsers and media types.
• http://www.w3.org/TR/CSS21/propidx.html