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.
© 1995-1998, Stephen Le Hunte
See also:
file: /Techref/language/html/ib/Scripting_Reference/styleo.htm, 19KB, , updated: 2010/12/20 08:57, local time: 2024/12/26 04:28,
3.22.27.41:LOG IN
|
©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? <A HREF="http://ecomorder.com/techref/language/html/ib/Scripting_Reference/styleo.htm"> The Style object</A> |
Did you find what you needed? |
Welcome to ecomorder.com! |
Welcome to ecomorder.com! |
.