The Style object

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 : none \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset
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.

Welcome to sxlist.com!

Site supported by
sales, advertizing,
& kind contributors
just like you!
Please don't rip/copy
(here's why
Copies of the site on CD
are available at minimal cost.