please dont rip this site
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.

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:

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:


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

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

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

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

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 is much the same as pixelLeft except that it returns, or sets the vertical offset of the referenced element, in pixels.

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

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.

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 is the same as posLeft, the only difference being that it deals with vertical offsets, not horizontal ones.

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.

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

See also:

file: /Techref/language/html/ib/Scripting_Reference/styleo.htm, 19KB, , updated: 2010/12/20 09:57, local time: 2024/7/25 08:04,

 ©2024 These pages are served without commercial sponsorship. (No popup ads, etc...).Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE. Questions?
Please DO link to this page! Digg it! / MAKE!

<A HREF=""> The Style object</A>

After you find an appropriate page, you are invited to your to this massmind site! (posts will be visible only to you before review) Just type a nice message (short messages are blocked as spam) in the box and press the Post button. (HTML welcomed, but not the <A tag: Instead, use the link box to link to another page. A tutorial is available Members can login to post directly, become page editors, and be credited for their posts.

Link? Put it here: 
if you want a response, please enter your email address: 
Attn spammers: All posts are reviewed before being made visible to anyone other than the poster.
Did you find what you needed?


Welcome to!


Welcome to!