style, CSSStyleDeclaration | NN 6 IE 4 DOM 2 |
| |
In its most generic sense, a style object is the
access point for scripts to read and write individual style
attributes for a given element. This style object
exposes (or has the potential to expose) every style sheet attribute
supported by the browser (the kinds of CSS attributes described in
Chapter 11).
|
|
In practice, however, a style object that you
access through an HTML element object's
style property (one of the shared properties
described early in this chapter) is limited in scope: It reflects
only the CSS settings explicitly defined in the
element's tag via the style
attribute or settings assigned to the element's
style property via script. But other style sheets
associated with the browser (internal style sheets) and the document
(explicit style sheet rules defined in the
<style> element and rules imported through
either a link element or an
@import rule) also affect the rendered
characteristics of the element. A union of all style sheet attributes
affecting an elementthe effective style definitionmay
be read, but through browser-dependent syntax. IE uses the
currentStyle property of an element, whereas
Netscape 6 uses the W3C DOM window.getComputedStyle(
) method. Both syntaxes return an object that lets scripts
inspect the value of each effective style attribute value.
|
|
While the three IE style-related objects (style,
currentStyle, and runtimeStyle)
return a style object with properties that expose
CSS style attributes, the situation is a little more complex on the
Netscape 6 side. On the one hand, Netscape 6 implements a version of
the W3C DOM CSSStyleDeclaration object that
exposes all the CSS attributes as properties. This is the version
accessed through an element object's
style property (just like IE, thus making an
element object's style property
work cross-browser). But when you read the effective style sheet (via
window.getComputedStyle( )), the object that comes
back does not expose the CSS attributes directly as properties.
Instead, you must use the CSSStyleDeclaration
methods (listed below) to inspect a specific attribute value by name.
It's a longer way to reach a particular effective
style attribute value, but very much in keeping with other
attribute-reading syntax deployed throughout the W3C DOM. The only
time this cross-browser disconnect affects you is when you need to
view the effective style attribute for an unmodified style. Once you
set an attribute value via the element object's
style property, you can read it from the
style property cross-browser.
|
|
This section lists the available style object
properties plus the Netscape 6 (W3C DOM) formal methods for accessing
those attributes. The W3C DOM lists a large percentage of the
style object properties under an object umbrella
called CSS2Properties. The specification offers
the CSS2Properties object as an optional
convenience for browsers. Fortunately for cross-browser scripters,
Netscape 6 implements CSS2Properties at least for
the element object style property.
|
|
The properties of the style object listed below
correspond to the CSS attributes. For more information on a
particular property, see the corresponding listing in Chapter 11.
|
|
Object Model Reference |
|
- [window.]document.getElementById("elementID").style
- [window.]document.styleSheets[i].rules[j].style
- [window.]document.styleSheets[i].cssRules[j].style
|
|
Object-Specific Properties |
|
accelerator | azimuth | background |
backgroundAttachment | backgroundColor | backgroundImage |
backgroundPosition | backgroundPositionX | backgroundPositionY |
backgroundRepeat | behavior | blockDirection |
border | borderBottom | borderBottomColor |
borderBottomStyle | borderBottomWidth | borderCollapse |
borderColor | borderLeft | borderLeftColor |
borderLeftStyle | borderLeftWidth | borderRight |
borderRightColor | borderRightStyle | borderRightWidth |
borderSpacing | borderStyle | borderTop |
borderTopColor | borderTopStyle | borderTopWidth |
borderWidth | bottom | captionSide |
clear | clip | clipBottom |
clipLeft | clipRight | clipTop |
color | content | counterIncrement |
counterReset | cssFloat | cssText |
cue | cueAfter | cueBefore |
cursor | direction | display |
elevation | emptyCells | filter |
font | fontFamily | fontSize |
fontSizeAdjust | fontStretch | fontStyle |
fontVariant | fontWeight | height |
imeMode | layoutFlow | layoutGrid |
layoutGridChar | layoutGridLine | layoutGridMode |
layoutGridType | left | letterSpacing |
lineBreak | lineHeight | listStyle |
listStyleImage | listStylePosition | listStyleType |
margin | marginBottom | marginLeft |
marginRight | marginTop | markerOffset |
marks | maxHeight | maxWidth |
minHeight | minWidth | MozBinding |
MozOpacity | orphans | outline |
outlineColor | outlineStyle | outlineWidth |
overflow | overflowX | overflowY |
padding | paddingBottom | paddingLeft |
paddingRight | paddingTop | page |
pageBreakAfter | pageBreakBefore | pageBreakInside |
pause | pauseAfter | pauseBefore |
pitch | pitchRange | pixelBottom |
pixelHeight | pixelLeft | pixelRight |
pixelTop | pixelWidth | playDuring |
posBottom | posHeight | posLeft |
posRight | posTop | posWidth |
position | quotes | richness |
right | rubyAlign | rubyOverhang |
rubyPosition | scrollbar3dLightColor | scrollbarArrowColor |
scrollbarBaseColor | scrollbarDarkShadowColor | scrollbarFaceColor |
scrollbarHighlightColor | scrollbarShadowColor | scrollbarTrackColor |
size | speak | speakHeader |
speakNumeral | speakPunctuation | speechRate |
stress | styleFloat | tableLayout |
textAlign | textAlignLast | textAutospace |
textDecoration | textDecorationBlink | textDecorationLineThrough |
textDecorationNone | textDecorationOverline | textDecorationUnderline |
textIndent | textJustify | textKashidaSpace |
textOverflow | textShadow | textTransform |
textUnderlinePosition | top | unicodeBidi |
verticalAlign | visibility | voiceFamily |
volume | whiteSpace | widows |
width | wordBreak | wordSpacing |
wordWrap | writingMode | zIndex |
zoom | | |
|
|
Object-Specific Methods |
|
getPropertyCSSValue( ) | getPropertyPriority( ) | getPropertyValue( ) |
item( ) | removeProperty( ) | setProperty( ) |
|
|
Object-Specific Event Handler Properties |
None.
|