The Style Object

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.

Style Object Property Style Sheet attribute
background background
backgroundAttachment background-attachment
backgroundColor background-color
backgroundImage background-image
backgroundPostion background-position
backgroundRepeat background-repeat
border border
borderBottom border-bottom
borderBottomColor border-bottom-color
borderBottomStyle border-bottom-style
borderBottomWidth border-bottom-width
borderColor border-color
borderLeft border-left
borderLeftColor border-left-color
borderLeftStyle border-left-style
borderLeftWidth border-left-width
borderRight border-right
borderRightColor border-right-color
borderRightStyle border-right-style
borderRightWidth border-right-width
borderStyle border-style
borderTop border-top
borderTopColor border-top-color
borderTopStyle border-top-style
borderTopWidth border-top-width
borderWidth border-width
clear clear
clip clip
color color
cursor cursor
display display
filter filter
font font
fontFamily font-family
fontSize font-size
fontStyle font-style
fontVariant font-variant
fontWeight font-weight
height height
left left
letterSpacing letter-spacing
lineHeight line-height
listStyle list-style
listStyleImage list-style-image
listStylePosition list-style-position
listStyleType list-style-type
margin margin
marginBottom margin-bottom
marginLeft margin-left
marginRight margin-right
marginTop margin-top
overflow overflow
paddingBottom padding-bottom
paddingLeft padding-left
paddingRight padding-right
paddingTop padding-top
pageBreakAfter page-break-after
pageBreakBefore page-break-before
position position
styleFloat float
textAlign text-align
textDecoration text-decoration
textDecorationBlink text-decoration
textDecorationLineThrough text-decoration
textDecorationNone text-decoration
textDecorationOverline text-decoration
textDecorationUnderline text-decoration
textIndent text-indent
textTransform text-transform
top top
verticalAlign vertical-align
visibility visibility
width width
zIndex z-index

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.