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.

accelerator | NN n/a IE 5(Win) DOM n/a
| See text
For IE 5 and later running under Windows 2000 or newer version of Windows, users can set a preference to highlight an accelerator key for commands (or web page accessKey letters) when the user presses the Alt key. The accelerator key property controls whether the element is treated as a highlightable accelerator key string. Available as a property of the IE currentStyle (read-only) and runtimeStyle (read/write) objects only.
Example
    document.getElementById("controlH").style.accelerator = true;
Value
Boolean value: true | false.
Default
false

azimuth, cue, cueAfter, cueBefore, elevation, pause, pauseAfter, pauseBefore, pitch, pitchRange, playDuring, richness, speak, speakHeader, speakNumeral, speakPunctuation, speechRate, stress, voiceFamily, volume | NN 6 IE n/a DOM 2
| Read/Write
This large group of properties comes from CSS attributes intended for browsers that use speech synthesis techniques to vocalize document content. You don't have to be vision-impaired to benefit from this possibility, but Netscape 6 does not include this feature by default. Conceivably, other specialty browser makers will build a speech synthesized browser from the Mozilla engine. They'll have the hooks ready in the Mozilla DOM to permit scripting of these style properties. In the meantime, they're simply placeholders within Netscape 6. You can read about these CSS attributes in Chapter 11.
Value
All values for these properties are strings.
Default
None.

background | NN 6 IE 4 DOM 2
| Read/Write
Provides the element's style sheet background attribute. This is a shorthand attribute, so the scripted property consists of a string of space-delimited values for the backgroundAttachment, backgroundColor, backgroundImage, backgroundPosition, and backgroundRepeat property values. One or more values may be in the background value, and the individual values may be in any order. Available in IE as a property of the style and runtimeStyle objects only.
Example
    document.getElementById("myDiv").style.background = "url(logo.gif) repeat-y";
Value
String of space-delimited values corresponding to one or more individual background style properties.
Default
None.

backgroundAttachment | NN 6 IE 4 DOM 2
| Read/Write
Sets how the image is "attached" to the element. The image can either remain fixed within the viewable area of the element (the viewport) or it may scroll with the element as the document is scrolled. During scrolling, the fixed attachment looks like a stationary backdrop to rolling credits of a movie.
Example
    document.getElementById("myDiv").style.backgroundAttachment = "fixed";
Value
String of either allowable value: fixed | scroll.
Default
scroll

backgroundColor | NN 6 IE 4 DOM 2
| Read/Write
Provides the background color of the element. If you also set a backgroundImage, the image overlays the color. Transparent pixels of the image allow the color to show through.
Example
    document.getElementById("highlighted").style.backgroundColor = "yellow";
Value
Any valid color specification (see description at beginning of the chapter) or transparent.
Default
transparent

backgroundImage | NN 6 IE 4 DOM 2
| Read/Write
URL of the background image of the element. If you also set a backgroundColor, the image overlays the color. Transparent pixels of the image allow the color to show through.
Example
    document.getElementById("navbar").style.backgroundImage =
    "url(images/navVisited.jpg)";
Value
Any complete or relative URL to an image file in CSS URL format: url(filePath).
Default
None.

backgroundPosition | NN 6 IE 4 DOM 2
| Read/Write
Indicates the top and left location of a background image relative to the element's content region (plus padding). Positions may be specified as length values (with numbers and units or percentages) or according to a combination of constants top, right, bottom, left, and center. The property has no effect on a background images set to repeat along both axes. Some value types don't work (or work correctly) in IE 4. Available as a property of the IE style and runtimeStyle objects only.
Example
    document.getElementById("div3").style.backgroundPosition = "20% 50%";
Value
A string containing one value (to be applied to both horizontal and vertical axes) or a space-delimited pair of values. Values may be explicit length values (with units, as in 30px 5px), percentages (e.g., 50% 50%) or position constants that have explicit meanings for their combinations.
Percentage values are interpolated logically. For example, a value of 0% means that the image abuts the left or top edge of the element block; a value of 50% centers the image vertically or horizontally; a value of 100% places the image flush right or bottom..
Constant value pair | Percentage equivalents | Constant value pair | Percentage equivalents
top left | 0% 0% | center center | 50% 50%
left top | 0% 0% | right | 100% 50%
top | 50% 0% | right center | 100% 50%
top center | 50% 0% | center right | 100% 50%
center top | 50% 0% | bottom left | 0% 100%
right top | 100% 0% | left bottom | 0% 100%
top right | 100% 0% | bottom | 50% 100%
left | 0% 50% | bottom center | 50% 100%
left center | 0% 50% | center bottom | 50% 100%
center left | 0% 50% | bottom right | 100% 100%
center | 50% 50% | right bottom | 100% 100%
Default
0% 0%

backgroundPositionX, backgroundPositionY | NN n/a IE 4 DOM n/a
| Read/Write
Indicate the top and left locations of the background image relative to the element's content region (plus padding). Useful if you wish to adjust the background image along only one axis while not disturbing the other. The same IE 4 cautions for backgroundPosition apply to these two properties.
Example
    document.getElementById("div3").style.backgroundPositionX = "20px";
    document.getElementById("table2").style.backgroundPositionY = "10px;"
Value
You should be able to specify percentage values, which are the percentage of the block-level element's box width and height (respectively) at which point the image (or repeated images) begins. Setting percentage values, however, does not always work in IE 4 for Windows (and it doesn't work at all on the Mac), even though they are returned as the default value units. You are safest with pixel values. None of the allowed constants except top and left are recognized.
Default
0

backgroundRepeat | NN 6 IE 4 DOM 2
| Read/Write
Specifies whether a background image (specified with the backgroundImage property) should repeat and, if so, along which axes. You can use repeating background images to create horizontal and vertical bands with some settings.
Example
    document.getElementById("div3").style.backgroundRepeat = "repeat-y";
Value
With a string setting of no-repeat, one instance of the image appears in the location within the element established by the backgroundPosition property (default is top-left corner). Normal repeats are performed along both axes, but you can have the image repeat down a single column (repeat-y) or across a single row (repeat-x). To reestablish the default, assign the value repeat.
Default
repeat

behavior | NN n/a IE 5(Win) DOM n/a
| Read/Write
Controls whether an IE Windows external behavior is assigned to the element.
Example
    document.getElementById("div3").style.behavior = "url(#default#userData)";
Value
CSS-formatted URL value, with the actual URL pointing to an external .htc file, ID of an object element that loads a behavior ActiveX control into the page, or one of the built-in default behaviors (in the format url(#default#behaviorName)).
Default
None.

blockDirection | NN n/a IE 5(Win) DOM n/a
| Read-only
Returns the writing script direction of the current element. Available as a property of the IE currentStyle object only.
Example
    if (document.getElementById("myDIV").style.blockDirection = "rtl") {
        // process right-to-left text
    }
Value
String constant values: ltr | rtl.
Default
ltr

border | NN 6 IE 4 DOM 2
| Read/Write
Provides a shorthand property for getting or setting the borderColor, borderStyle, and/or borderWidth properties of all four borders around an element in one statement. You must specify a border style (see borderStyle) for changes of this property to affect the display of the element's border (a missing style is interpreted as no style, ergo no border). Numerous other properties allow you to set the width, style, and color of individual edges or groups of edges if you don't want all four edges to be the same. Only those component settings explicitly made in the element's tag attributes are reflected in the property, but you may assign components not part of the original tag. Available in IE as a property of the style and runtimeStyle objects only.
Example
    document.getElementById("announce").style.border = "inset red 4px";
Value
Space-delimited string. For the borderStyle and borderWidth component values, see the respective properties in this chapter. For details on the borderColor value, see the section about CSS colors at the beginning of Chapter 11.
Default
None.

borderBottom, borderLeft, borderRight, borderTop | NN 6 IE 4 DOM 2
| Read/Write
These are shorthand properties for getting or setting the borderColor, borderStyle, and/or borderWidth properties for a single edge of an element in one statement. You must specify a border style (see borderStyle) for changes of these properties to affect the display of the element's border (a missing style is interpreted as no style, ergo no border along the specified edge). If you want all four edges to be the same, see the border attribute. Only those component settings explicitly made in the element's tag attributes are reflected in the property, but you may assign components not part of the original tag. Available in IE as properties of the style and runtimeStyle objects only.
Example
    document.getElementById("announce").style.borderBottom = "inset red 4px";
    document.getElementById("announce").style.borderLeft = "solid #20ff00 2px";
    document.getElementById("announce").style.borderRight = "double 3px";
    document.getElementById("announce").style.borderTop = "outset red 8px";
Value
Space-delimited string. For the border Side Style and border Side Width component values, see the respective properties in this chapter. For details on the border Side Color value formats, see the section about colors at the beginning of Chapter 11.
Default
None.

borderBottomColor, borderLeftColor, borderRightColor, borderTopColor | NN 6 IE 4 DOM 2
| Read/Write
Provide the color of a single border edge of an element. It is easy to abuse these properties by mixing colors that don't belong together. See also the borderColor attribute for setting the color for groups of edges in one statement.
Example
    document.getElementById("announce").style.borderBottomColor = "red";
    document.getElementById("announce").style.borderLeftColor = "#20ff00";
    document.getElementById("announce").style.borderRightColor = "rgb(100, 75, 0)";
    document.getElementById("announce").style.borderTopColor = "rgb(90%, 0%, 25%)";
Value
For details on CSS color values, see the section about colors at the beginning of Chapter 11.
Default
None.

borderBottomStyle, borderLeftStyle, borderRightStyle, borderTopStyle | NN 6 IE 4 DOM 2
| Read/Write
Provide the line style of a single border edge of an element. The edge-specific attributes let you override a style that has been applied to all four edges with the border or borderStyle properties. See also the borderStyle property for setting the style for groups of edges in one statement.
Example
    document.getElementById("announce").style.borderBottomStyle = "groove";
    document.getElementById("announce").style.borderLeftStyle = "double";
    document.getElementById("announce").style.borderRightStyle = "solid";
    document.getElementById("announce").style.borderTopStyle = "inset";
Value
Style values are case-insensitive constants that are associated with specific ways of rendering border lines. The CSS style constants are: dashed, dotted, double, groove, hidden, inset, none, outset, ridge, and solid. Not all browsers recognize all the values in the CSS recommendation. See the border-style attribute listing in Chapter 11 for complete details on the available border styles.
Default
None.

borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth | NN 6 IE 4 DOM 2
| Read/Write
Provide the width of a single border edge of an element. See also the borderWidth property for setting the width for groups of edges in one statement.
Example
    document.getElementById("announce").style.borderBottomWidth= "thin";
    document.getElementById("announce").style.borderLeftWidth = "thick";
    document.getElementById("announce").style.borderRightWidth = "2px";
    document.getElementById("announce").style.borderTopWidth = "0.5em";
Value
Three case-insensitive constantsthin | medium | thickallow the browser to define how many pixels are used to show the border. For more precision, you can also assign a length value (see the discussion of CSS length values at the beginning of Chapter 11).
Default
medium

borderCollapse | NN 6 IE 5 DOM 2
| Read/Write
Controls which table border model the table element should observe.
Example
    document.getElementById("myTable").style.borderCollapse = "separate";
Value
Two case-insensitive string constants: collapse | separate. IE 5 for Macintosh and Netscape 6 do not respond to changes to this property.
Default
separate

borderColor | NN 6 IE 4 DOM 2
| Read/Write
A shortcut attribute that lets you set multiple border edges to the same or different colors. You may supply one to four space-delimited color values. The number of values determines which sides receive the assigned colors.
Example
    document.getElementById("announce").style.borderColor = "red";
    document.getElementById("announce").style.borderColor = "red green";
    document.getElementById("announce").style.borderColor =
    "black rgb(100, 75, 0) #c0c0c0";
    document.getElementById("announce").style.borderColor = "yellow green blue red";
Value
This property accepts one, two, three, or four color values as a string (including transparent as a color), depending on how many and which borders you want to set with specific colors. See the border-color attribute listing in Chapter 11 for complete details on how the number of values affects this property.
Default
The object's color property (if it is set).

borderSpacing | NN 6 IE 5 DOM 2
| Read/Write
Controls the spacing between table cells when the table is in (the default) separate borders mode, similar to a table object's cellSpacing property. IE 5 for the Macintosh doesn't respond to changes of this property's value. Available in IE as a property of the style object only.
Example
    document.getElementById("myTable").style.borderSpacing= "12px";
Value
CSS length value as a string (see the discussion of CSS length values at the beginning of Chapter 11).
Default
None.

borderStyle | NN 6 IE 4 DOM 2
| Read/Write
This is a shortcut property that lets you set multiple border edges to the same or different style. You may supply one to four space-delimited style values. The number of values determines which sides receive the assigned colors.
Example
    document.getElementById("announce").style.borderStyle = "solid";
    document.getElementById("announce").style.borderStyle = "solid double";
    document.getElementById("announce").style.borderStyle =
    "double groove groove double";
Value
Style values are case-insensitive constants that are associated with specific ways of rendering border lines. The CSS style constants are: dashed, dotted, double, groove, hidden, inset, none, outset, ridge, and solid. Not all browsers recognize all the values in the CSS recommendation. See the border-style attribute listing in Chapter 11 for complete details on the available border styles.
This property accepts one, two, three, or four style values as a string, depending on how many and which borders you want to set with specific styles. See the border-style attribute listing in Chapter 11 for complete details on how the number of values affects this property.
Default
none

borderWidth | NN 6 IE 4 DOM 2
| Read/Write
This is a shortcut property that lets you set multiple border edges to the same or different width. You may supply one to four space-delimited width length values. The number of values determines which sides receive the assigned widths.
Example
    document.getElementById("founderQuote").style.borderWidth = "3px 5px";
Value
Three case-insensitive constantsthin | medium | thickallow the browser to define exactly how many pixels are used to show the border. For more precision, you can also assign a length value (see the discussion of length values at the beginning of Chapter 11).
This property accepts one, two, three, or four values, depending on how many and which borders you want to set with specific widths. See the border-width attribute listing in Chapter 11 for complete details on how the number of values affects this property.
Default
medium

bottom | NN 6 IE 5 DOM 2
| Read/Write
For an absolute-positioned element, defines the position of the bottom edge of an element's box (content plus bottom padding, border, and/or margin) relative to the bottom edge of the next outermost block content container. IE for Windows and Netscape 6 do something unexpected when the positioned element uses the root positioning context. Instead of using the bottom of the document as the comparative edge, these browsers use the bottom of the browser window space (the viewport in CSS terminology). This means that the precise bottom position of the element varies with the user's browser window size. IE 5 for the Macintosh uses the document's bottom as the comparative edge. This discrepancy makes it more practical to use the bottom property for a positioned element nested inside another positioned element. When the element is relative-positioned, the offset is based on the bottom edge of the inline location where the element would normally appear in the content.
For numeric calculations on this value in IE, retrieve the pixelBottom or posBottom style properties, which return genuine numeric values.
Example
    document.getElementById("blockD2").style.bottom = "35px";
Value
String consisting of a numeric value and length unit measure, a percentage, or auto.
Default
auto

captionSide | NN 6 IE 5(Mac) DOM 2
| Read/Write
Controls the location of a caption element (nested inside a table element) relative to the table's box.
Example
    document.getElementById("myTable").style.captionSide = "bottom";
Value
Case-insensitive string of any of the following constants: bottom | left | right | top. Some browsers may be limited to only the bottom and top values.
Default
top

clear | NN 6 IE 4 DOM 2
| Read/Write
Defines whether the element allows itself to be displayed in the same horizontal band as a floating element. Typically, another element in the vicinity has its float style attribute set to left or right. To prevent the current element from being in the same band as the floating block, set the clear property to the same side (left or right). If you aren't sure where the potential overlap might occur, set the clear property to both. An element that has its clear property set to a value other than none is rendered at the beginning of the next available line below the floating element.
Example
    document.getElementById("myDiv").style.clear = "both";
Value
Case-insensitive string of any of the following constants: both | left | none | right.
Default
none

clip | NN 6 IE 4 DOM 2
| Read/Write
Defines a clipping region of a positionable element. The clipping region is the area of the element layer in which content is visible. Clipping may not work properly in Internet Explorer 4 for the Macintosh. Available in IE as a property of the style and runtimeStyle objects only.
Example
    document.getElementById("art2").style.clip = "rect(5px 100px 40px 0)";
Value
Case-insensitive string of either the auto constant or the CSS clip attribute setting that specifies the shape (rect only for now) and the position of the four clip edges relative to the original element's top-left corner. When specifying lengths for each side of the clipping rectangle, observe the clockwise order of values: top, right, bottom, left. See the discussion about CSS length values at the beginning of Chapter 11. A value of auto sets the clipping region to the block that contains the content. In Internet Explorer, the width may extend to the width of the next outermost container (such as the body element).
Default
None.

clipBottom, clipLeft, clipRight, clipTop | NN n/a IE 5(Win) DOM n/a
| Read-only
Return a clipping edge of a positionable element. Available in IE as a property of the currentStyle object only.
Example
    var cl = document.getElementById("art2").style.clipLeft;
Value
Case-insensitive length string or auto constant. See the discussion about CSS length values at the beginning of Chapter 11.
Default
None.

color | NN 6 IE 4 DOM 2
| Read/Write
Sets the foreground (text) color style sheet attribute of the element. For some graphically oriented elements, such as form controls, the color attribute may also be applied to element edges or other features. Such extracurricular behavior is browser specific and may not be the same across browsers.
Example
    document.getElementById("specialDiv").style.color = "green";
Value
Case-insensitive CSS color specification (see the discussion at beginning of Chapter 11).
Default
black

content | NN 6 IE 5(Mac) DOM 2
| Read/Write
Defines extra content that is to be displayed before or after and element (in concert with the :before and :after pseudo-classes. Although the property is available for IE 5 Macintosh and Netscape 6, the values are empty strings and the rendered content (which appears in Netscape 6 only) does not change if you assign it a new value.
Value
See the discussion of the content CSS attribute in Chapter 11.
Default
None.

counterIncrement, counterReset | NN 6 IE 5(Mac) DOM 2
| Read/Write
These properties are placeholders for future implementations of automatic counter mechanisms specified in the CSS specification. They are not yet functional in the browsers shown above.
Value
See the discussion of the counterIncrement and counterReset CSS attributes in Chapter 11.
Default
None.

cssFloat | NN 6 IE 5(Mac) DOM 2
| Read/Write
Controls the CSS float attribute for an element, allowing adjacent text content to wrap around block elements, such as images. Changing the value in IE 5 for Macintosh has no effect. The "css" prefix for this property name deflects potential conflicts with the float reserved JavaScript keyword.
Example
    document.getElementById("myDiv").style.cssFloat = "right";
Value
String of an allowable constant value: left | right | none.
Default
none

cssText | NN 6 IE 4 DOM 2
| Read-only
Returns a string of the entire CSS style sheet rule applied to the element. If the rule included shorthand style attribute settings (such as border), browsers return modified versions according to their ideas of what the value means. If you set the style attribute of an element to style="border: groove red 3px", IE for Windows reports the cssText property for that element as:
IE for Macintosh reports:
And Netscape 6 reports:
Note how each browser manipulates the sequence of individual values. Even so, you can assign a shorthand value to the property and in any order you like. Available in IE as a property of the style and runtimeStyle objects only.
Example
    document.getElementById("block3").style.cssText = "margin: 2px; font-size: 14pt";
Value
String value of semicolon-delimited style attributes.
Default
None.

currentStyle | NN n/a IE 5 DOM n/a
| Read-only
Returns a style object with properties that reflect the effective values being applied to the element. This property takes into account style sheet rules defined in a style element, imported from external style sheet files, and inline style attributes. Because the style property reflects only inline style attributes, the currentStyle property is more valuable for reading initial values after a document loads. To modify style attributes, you can use the element's style object properties. For similar capabilities in Netscape 6, see the window.getComputedStyle( ) method.
Example
    var currSize = document.getElementById("elementID").currentStyle.fontSize;
Value
style object reference.
Default
The effective style object.

cue, cueAfter, cueBefore |
See azimuth.

cursor | NN 6 IE 4 DOM 2
| Read/Write
Specifies the shape of the cursor when the screen pointer is atop the element. The precise look of cursors depends on the operating system. Before deploying a modified cursor, be sure you understand the standard ways that the various types of cursors are used within the browser and operating system. Users expect a cursor design to mean the same thing across all applications. Figure 11-3 in Chapter 11 offers a gallery of Windows and Macintosh cursors for each of the cursor constant settings provided by Internet Explorer and the Netscape 6 group.
Setting this property affects the cursor only when it is atop the current element and does not set the cursor immediately on a global basis.
Example
    document.getElementById("hotStuff").style.cursor = "pointer";
Value
Any one cursor constant as a string, as supported by various browsers and versions.
The IE 6 setting of an external URL requires an address of a cursor file of extension .cur or .ani.
Cursor name | IE/Windows | IE/Mac | NN
alias | n/a | n/a | 6
all-scroll | 6 | n/a | n/a
auto | 4 | 4 | 6
cell | n/a | n/a | 6
col-resize | 6 | n/a | n/a
context-menu | n/a | n/a | 6
copy | n/a | n/a | 6
count-down | n/a | n/a | 6
count-up | n/a | n/a | 6
count-up-down | n/a | n/a | 6
crosshair | 4 | 4 | 6
default | 4 | 4 | 6
e-resize | 4 | 4 | 6
grab | n/a | n/a | 6
grabbing | n/a | n/a | 6
hand | 4 | 4 | n/a
help | 4 | 4 | 6
move | 4 | 4 | 6
n-resize | 4 | 4 | 6
ne-resize | 4 | 4 | 6
no-drop | 6 | n/a | n/a
not-allowed | 6 | n/a | n/a
nw-resize | 4 | 4 | 6
pointer | 4 | 4 | 6
progress | 6 | n/a | n/a
row-resize | 6 | n/a | n/a
s-resize | 4 | 4 | 6
se-resize | 4 | 4 | 6
spinning | n/a | n/a | 6
sw-resize | 4 | 4 | 6
text | 4 | 4 | 6
url(uri) | 6 | n/a | n/a
vertical-text | 6 | n/a | n/a
w-resize | 4 | 4 | 6
wait | 4 | 4 | 6
Default
auto

direction | NN 6 IE 5 DOM 2
| Read/Write
Returns the writing script direction of the current element. Intended primarily for elements inside documents with mixed writing script directions (e.g., French text intermingled among Arabic).
Example
    document.getElementById("term3").style.direction = "ltr";
Value
String constant values: ltr | rtl.
Default
ltr

disabled | NN 6 IE 4 DOM 1
| Read/Write
Specifies whether the element is available for user interaction. When set to true, the element cannot receive focus or be modified by the user, and it typically appears grayed out on the page. This property is available for all HTML element objects in IE 5.5 for Windows and later. For IE 4 and IE 5, it applies only to form controls, while Netscape 6 and later recognize the property for form controls and the style element object. A disabled form control's name/value pair is not submitted with its form.
Example
    document.getElementById("myButton").disabled = true;
Value
Boolean value: true | false.
Default
false

display | NN 6 IE 4 DOM 2
| Read/Write
Controls the CSS box type used to render the element. The most common settings for body content dictate whether an element is rendered as a block or inline element. When set to none, the element is hidden, and surrounding content cinches up to fill the space. Some box types are specific to tables and lists.
Example
    document.getElementById("instructionDiv").style.display = "none";
Value
Any one display type constant as a string, as supported by various browsers and versions.
Display type | IE/Windows | IE/Mac | NN
block | 5 | 4 | 6
inline | 5 | 4 | 6
inline-block | 5.5 | n/a | n/a
none | 4 | 4 | 6
run-in | n/a | 5 | 6
table-footer-group | 5.5 | 5 | 6
table-header-group | 5 | 5 | 6
Default
Element-dependent.

elevation |
See azimuth.

emptyCells | NN 6 IE 5(Mac) DOM 2
| Read/Write
When a table is set to render the separate cell box format (the default), and a border is established for td elements in that table, the emptyCells style property controls whether the table renders borders around cells that have no content.
Example
    document.getElementById("myTable").style.emptyCells = "hide";
Value
String of allowable constant values: hide | show.
Default
show

filter | NN n/a IE 4(Win) DOM n/a
| Read/Write
Sets the visual, reveal, or blend filter used to display or change content of an element. A visual filter can be applied to an element to produce effects such as content flipping, glow, drop shadow, and many others. A reveal filter is applied to an element when its visibility changes. The value of the reveal filter determines what visual effect is to be applied to the transition from hidden to shown (or vice versa). This includes effects such as wipes, blinds, and barn doors. A blend filter sets the speed at which a transition between states occurs. Although the filter property is present in Internet Explorer for Macintosh, it does not operate there.
Example
    document.getElementById("fancy").style.filter= "dropshadow( )";
Value
Each filter property may have more than one space-delimited filter type associated with it. Each filter type is followed by a pair of parentheses, which may convey parameters about the behavior of the filter for the current element. A parameter generally consists of a name/value pair, with assignment performed by the equals symbol. Note that Microsoft instituted an entirely new filter syntax starting with IE 5.5 for Windows. The new syntax runs in parallel with the old (for now). See the filter style sheet attribute listing in Chapter 11 for details on filter settings and parameters.
Default
None.

font | NN 6 IE 4 DOM 2
| Read/Write
This is a shorthand property that lets you set one or more font-related propertiesfontFamily, fontSize, lineHeight (which must be preceded by a / symbol in this property), fontStyle, fontVariant, and fontWeightwith one assignment statement. A space-delimited list of values (in any sequence) is applied to the specific font properties for which the value is a valid type. Or, you can short-circuit these individual settings by choosing one of the default (operating-system-dependent) system fonts: caption | icon | menu | message-box | small-caption | status-bar.
Example
    document.getElementById("subhead").style.font = "bolder small-caps 16pt";
Value
For syntax and examples of value types for font-related properties, see the respective property listing.
Default
None.

fontFamily | NN 6 IE 4 DOM 2
| Read/Write
Provides a prioritized list of font families to be used to render the object's content. One or more font family names may be included in a comma-delimited list of property values. If a font family name consists of multiple words, the family name must be inside a set of inner quotes. Available in IE as a property of the style and runtimeStyle objects only, but the individual font properties are available in currentStyle, as well.
Example
    document.getElementById("subhead").style.fontFamily =
        "'Century Schoolbook', Times, serif";
Value
Any number of font family names, comma delimited. Multiword family names must be quoted. Recognized generic family names are: serif | sans-serif | cursive | fantasy | monospace.
Default
Browser default.

fontSize | NN 6 IE 4 DOM 2
| Read/Write
Indicates the font size of the element. The font size can be set in several ways. A collection of constants (xx-small, x-small, small, medium, large, x-large, xx-large) defines what are known as absolute sizes. In truth, these are absolute only in a single browser in a single operating system, since the reference point for these sizes varies with browser and operating system (analogous to the old HTML font sizes of 1 through 7). But they do let the author have confidence that one element set to large is rendered larger than medium.
Another collection of constants (larger, smaller) is known as relative sizes. Because the font-size style attribute is inherited from the parent element, these relative sizes are applied to the parent element to determine the font size of the current element. It is up to the browser to determine exactly how much larger or smaller the font size is, and a lot depends on how the parent element's font size is set. If it is set with one of the absolute sizes (large, for example), a child's font size of larger means the font is rendered in the browser's x-large size. The increments are not as clear-cut when the parent font size is set with a length or percentage.
If you elect to use a length value for the fontSize property, you will achieve greater consistency across operating systems if units such as pixels (px) or ems (em), instead of points (pt). Em units are calculated with respect to the size of the parent element's font size. Finally, you can set fontSize to a percentage, which is calculated based on the size of the parent element's font size.
Example
    document.getElementById("teeny").style.fontSize = "x-small";
Value
Case-insensitive string values from any of the following categories. For an absolute size, one of the following constants: xx-small | x-small | small | medium | large | x-large | xx-large. For a relative size, one of the following constants: larger | smaller. For a length, see the discussion about CSS length values at the beginning of Chapter 11. For a percentage, the percentage value and the % symbol.
Default
Parent element's font size.

fontSizeAdjust | NN 6 IE 5(Mac) DOM 2
| Read/Write
Provides the font aspect value, usually of the first font family in a font-family attribute sequence, forcing alternative font families to calculate their rendered font size to closely match that of the primary font family. Although this property is a member of the style object in IE 5/Mac and Netscape 6, neither the style attribute nor scripted changes to it affect the font display.
Example
    document.getElementById("myDIV").style.fontSizeAdjust = "0.56";
Value
Numeric aspect value as a quoted string, or none.
Default
none

fontStretch | NN 6 IE 5(Mac) DOM 2
| Read/Write
Provides the character spacing for the element, based on available spacing widths available for the current font family. Although this property is a member of the style object in IE 5/Mac and Netscape 6, neither the style attribute nor scripted changes to it affect the font display.
Example
    document.getElementById("myDIV").style.fontStretch= "ultra-condensed";
Value
String of allowable constant values: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded, or none.
Default
none

fontStyle | NN 6 IE 4 DOM 2
| Read/Write
Specifies whether the element is rendered in a normal (roman), italic, or oblique font style. If the fontFamily includes font faces labeled Italic and/or Oblique, the setting of the fontStyle attribute summons those particular font faces from the browser's system. But if the specialized font faces are not available in the system, the normal font face is usually algorithmically slanted to look italic. Output sent to a printer with such font settings relies on the quality of arbitration between the client computer and printer to render an electronically generated italic font style. Personal computer software typically includes other kinds of font rendering under the heading of "Style." See fontVariant and fontWeight for other kinds of font "styles."
Example
    document.getElementById("emphasis").style.fontStyle = "italic";
Value
One the following string constant values: normal | italic | oblique.
Default
normal

fontVariant | NN 6 IE 4 DOM 2
| Read/Write
Specifies whether the element should be rendered in all uppercase letters in such a way that lowercase letters of the source code are rendered in smaller uppercase letters. If a font family contains a small caps variant, the browser should use it automatically. More likely, however, the browser calculates a smaller size for the uppercase letters that take the place of source code lowercase letters. In practice, Internet Explorer 4 renders the entire source code content as uppercase letters of the same size as the parent element's font, regardless of the case of the source code. Later IE versions and Netscape 6 use two different uppercase sizes.
Example
    document.getElementById("emphasis").style.fontVariant = "small-caps";
Value
Any of the following constant values as strings: normal | small-caps.
Default
normal

fontWeight | NN 6 IE 4 DOM 2
| Read/Write
Sets the weight (boldness) of the element's font. CSS provides a weight rating scheme that is more granular than most browsers render on the screen, but the finely tuned weights may come into play when the content is sent to a printer. The scale is a numeric rating from 100 to 900 at 100-unit increments. Therefore, a fontWeight of 100 would be the least bold that would be displayed, while 900 would be the boldest. A setting of normal (the default weight for any font) is equivalent to a fontWeight value of 400; the standard bold setting is equivalent to 700. Other settings (bolder and lighter) let you specify a weight relative to the parent element's weight.
Example
    document.getElementById("hotStuff").style.fontWeight = "bold";
Value
Any of the following constant values: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900.
Default
normal

height, width | NN 6 IE 4 DOM 2
| Read/Write
Indicate the height and width (and their units) of the element. Because the values are strings containing the assigned units, you cannot use these properties for calculation. Grab copies of the numbers by using parseFloat( ) on the values; or for IE, use pixelHeight, pixelWidth, posHeight, and posWidth properties. Changes to these properties may not be visible unless the element has its position style attribute set.
In IE 6 standards compatibility mode (where document.compatType == "CSS1Compat"), these dimensions apply to only the content portion of an element, irrespective of borders, padding, or margins. For example, if a positioned element that is equipped with padding and borders must be sized to a precise rectangular size, you must subtract the thicknesses of the padding and borders from the height and width values so that the overall element is the desired size.
Example
    document.getElementById("viewArea").style.height = "450px";
Value
String consisting of a numeric value and length measure or percentage.
Default
None.

imeMode | NN n/a IE 5(Win) DOM n/a
| Read/Write
Controls the presence of the Input Method Editor in IE for Windows for browser and system versions that support languages such as Chinese, Japanese, and Korean.
Example
    document.getElementById("nameEntry").style.imeMode = "active";
Value
String of allowable constant values: active | auto | disabled | inactive.
Default
auto

layoutFlow | NN n/a IE 5(Win) DOM n/a
| Read/Write
Intended primarily for languages that display characters in vertical sentences, controls the progression of content. Replaced starting with IE 5.5 for Windows by the writingMode property.
Value
One of the constant values (as a string): horizontal | vertical-ideographic.
Default
horizontal

layoutGrid | NN n/a IE 5(Win) DOM n/a
| Read/Write
This is a shorthand property that lets you set one or more layout grid properties (layoutGridChar, layoutGridLine, layoutGridMode, and layoutGridType) with one assignment statement. These attributes are used primarily with Asian language content.
Example
    document.getElementById("subhead").style.layoutGrid = "2em strict";
Value
For syntax and examples of value types for layoutGrid-related properties, see the respective property listing.
Default
None.

layoutGridChar | NN n/a IE 5(Win) DOM n/a
| Read/Write
Dictates the size of Asian language character grid for block-level elements.
Example
    document.getElementById("subhead").style.layoutGrid Char= "auto";
Value
String consisting of an explicit CSS length value or auto or none.
Default
none

layoutGridLine | NN n/a IE 5(Win) DOM n/a
| Read/Write
Dictates the line height of Asian language character grid for block-level elements.
Example
    document.getElementById("subhead").style.layoutGrid Line= "120%";
Value
String consisting of an explicit CSS length value or auto or none.
Default
none

layoutGridMode | NN n/a IE 5(Win) DOM n/a
| Read/Write
Specifies whether the Asian language character grid should be one- or two-dimensional.
Example
    document.getElementById("subhead").style.layoutGrid Mode= "both";
Value
String constant values: both | char (for inline elements) | line (for block-level elements) | none.
Default
both

layoutGridType | NN n/a IE 5(Win) DOM n/a
| Read/Write
Controls how the layout grid responds to characters of varying width..
Example
    document.getElementById("subhead").style.layoutGrid Type = "strict";
Value
String constant values: fixed | loose | strict.
Default
loose

left | NN 6 IE 4 DOM 2
| Read/Write
For positionable elements, defines the position of the left edge of an element's box (content plus left padding, border, and/or margin) relative to the left edge of the next outermost block content container. When the element is relative-positioned, the offset is based on the left edge of the inline location of where the element would normally appear in the content.
For calculations on this value, use parseFloat( ) on the returned value; or, in IE, retrieve the pixelLeft or posLeft properties, which return genuine numeric values.
Example
    document.getElementById("blockD2").style.left = "45px";
Value
String consisting of a numeric value and length unit measure, a percentage, or auto.
Default
auto

letterSpacing | NN 6 IE 4 DOM 2
| Read/Write
Specifies the spacing between characters within an element. Browsers normally define the character spacing based on font definitions and operating system font rendering. Assigning a negative value tightens the spacing, but be sure to test the effect on the selected font for readability on different operating systems.
Example
    document.body.style.letterSpacing = "1.1em";
Value
A string of a length value (with unit of measure) or normal. The best results are achieved by using units that are based on the rendered font size (em and ex). A setting of normal is how the browser sets the letters without any intervention.
Default
normal

lineBreak | NN n/a IE 5(Win) DOM n/a
| Read/Write
Controls line breaking rules for Japanese text.
Example
    document.body.style.lineBreak = "strict";
Value
String constant values: normal | strict.
Default
normal

lineHeight | NN 6 IE 4 DOM 2
| Read/Write
Indicates the height of the inline box (the box holding one physical line of content). See the line-height style attribute in Chapter 11 for details on browser quirks and inheritance traits of different types of values.
Example
    document.getElementById("tight").style.lineHeight = "1.1em";
Value
A string of a length value (with unit of measure) or normal.
Default
normal

listStyle | NN 6 IE 4 DOM 2
| Read/Write
This is a shorthand property for setting up to three list-style properties in one assignment statement. Whichever attributes you don't explicitly set with this attribute assume their default values. These properties define display characteristics for the markers automatically rendered for list items inside ol and ul elements. This is available in IE as a property of the style and runtimeStyle objects only, but individual properties are properties of currentStyle, as well.
Example
    document.getElementById("itemList").style.listStyle = "square outside none";
Value
See the individual attribute entries for listStyleType, listStylePosition, and listStyleImage for details on acceptable values for each. You may include one, two, or all three values in the list-style attribute setting in any order you wish.
Default
None.

listStyleImage | NN 6 IE 4 DOM 2
| Read/Write
Provides the URL for an image that is to be used as the marker for a list item. Because this attribute can be inherited, a setting (including none) for an individual list item can override the same attribute or property setting in its parent.
Example
    document.getElementById("itemList").style.listStyleImage = "url(images/3DBullet.gif)";
Value
Use none (as a string) to override an image assigned to a parent element. Otherwise, supply any valid full or relative URL (in the CSS URL format) to an image file with a MIME type that is readable by the browser.
Default
none

listStylePosition | NN 6 IE 4 DOM 2
| Read/Write
Specifies whether the marker is inside or outside (outdented) the box containing the list item's content. When listStylePosition is set to inside and the content is text, the marker appears to be part of the text block. In this case, the alignment (indent) of the list item is the same as normal, but without the outdented marker.
Example
    document.getElementById("itemList").style.listStylePosition = "inside";
Value
Either constant value as a string: inside | outside.
Default
outside

listStyleType | NN 6 IE 4 DOM 2
| Read/Write
Specifies the kind of item marker to be displayed with each item. This attribute is applied only if listStyleImage is none (or not specified). The constant values available for this attribute are divided into two categories. One set is used with ul elements to present a filled disc, an empty circle, or a filled square (except empty square on IE 4 for Macintosh). The other set is for ol elements, which has list items that can be marked in sequences of arabic numerals, roman numerals (uppercase or lowercase), letters of the alphabet (uppercase or lowercase), and some other character sequences of other languages if the browser and operating system supports those languages.
Example
    document.getElementById("itemList").style.listStyleType = "circle";
Value
One constant value as a string that is relevant to the type of list container. For ul: circle | disc | square. For ol: decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha. Commonly-supported ol element sequences are treated as shown in the following table.
Type | Example
decimal | 1, 2, 3, ...
decimal-leading-zero | 01, 02, 03, ...
lower-alpha | a, b, c, ...
lower-greek | , , , ...
lower-roman | i, ii, iii, ...
upper-alpha | A, B, C, ...
upper-roman | I, II, III, ...
Default
disc (for ul); decimal (for ol).

margin | NN 6 IE 4 DOM 2
| Read/Write
This is a shortcut property that can set the margin widths of up to four edges of an element with one statement. A margin is space that extends beyond the border of an element to provide extra empty space between adjacent or nested elements, especially those that have border attributes set. You may supply one to four space-delimited margin values. The number of space-delimited values determines which sides receive the assigned margins.
Example
    document.getElementById("logoWrapper").style.margin = "5px 8px";
Value
This property accepts one, two, three, or four space-delimited values inside one string, depending on how many and which margins you want to set. See the margin attribute listing in Chapter 11 for complete details on how the number of values affects this property. Values for the margins can be lengths, percentages of the next outermost element size, or the auto constant.
Default
0

marginBottom, marginLeft, marginRight, marginTop | NN 6 IE 4 DOM 6
| Read/Write
All four properties set the width of a single margin edge of an element. A margin is space that extends beyond the element's border and is not calculated as part of the element's width or height.
Example
    document.getElementById("logoWrapper").style.marginTop = "5px";
    document.getElementById("navPanel").style.marginLeft = "10%";
Value
Values for margin widths can be length values, percentages of the next outermost element size, or the auto constant.
Default
0

markerOffset | NN 6 IE n/a DOM n/a
| Read/Write
Controls the space between list item markers (which occupy their own box in the CSS box model) and the box that contains the list item text. Although the property is available for Netscape 6, the value is an empty string and the rendered content does not change if you assign it a new value.
Value
A string of a length value (with unit of measure) or auto.
Default
None.

marks | NN 6 IE 5(Mac) DOM 2
| Read/Write
Sets crop mark type for an @page rule. Although the property is available for IE 5 Macintosh and Netscape 6, the values are empty strings and the rendered content does not change if you assign it a new value.
Value
Case-insensitive string of any of the following constants: crop | cross | none.
Default
none

maxHeight, maxWidth, minHeight, minWidth | NN 6 IE (See text) DOM 2
| Read/Write
Define loose heights and widths for an element so that, for "max" properties, an element is allowed to grow no bigger in the designated dimension, or, for "min" properties, an element can expand in the designated dimension to accommodate more than expected content or rendering situations. Although the property is available for IE 5 Macintosh and Netscape 6, it is either ignored (IE 5 for Mac) or buggy (Netscape 6). IE 6 for Windows supports only the minWidth property, and it can be used only for tr, th, and td elements.
Value
CSS length value (see Chapter 11) as a string.
Default
None.

MozBinding | NN 6 IE n/a DOM n/a
| Read/Write
Points to the URL of an XML document designed to enhance an existing element or create a new interface element. Based on Mozilla XBL (Extensible Bindings Language). For more details, visit http://www.mozilla.org/unix/customizing.html.
Value
CSS URL value string or none.
Default
None.

MozOpacity | NN 6 IE n/a DOM n/a
| Read/Write
Defines the level of opacity of the element. The lower the value, the more transparent the element becomes. This is the proprietary Mozilla version of the proprietary Microsoft opaque filter.
Example
    document.getElementById("menuWrapper").style.MozOpacity = "40%";
Value
Numeric string value between 0 and 1 or string percentage value between 0% and 100%.
Default
100% (completely opaque)

orphans, widows | NN 6 IE 5(Mac) DOM 2
| Read/Write
For a block-level element's content that spreads across page boxes, specify the minimum number of lines of the element that must appear at the bottom of the page (orphans) or at the top of the next page (widows). Although these properties are members of the style object in IE 5/Mac and Netscape 6, neither the style attribute nor scripted changes to it affect the printed output.
Example
    document.getElementById("sec23").style.orphans = "3";
Value
Integer as a string.
Default
None.

outline | NN 6 IE 5(Mac) DOM 2
| Read/Write
This is a shorthand property for getting or setting the outlineColor, outlineStyle, and/or outlineWidth properties of an outline around an element in one statement. You must specify an outline style (see outlineStyle) for changes of this property to affect the display. An outline is like a border, but overlays the element without occupying any content space or affecting the element's dimensions. Although this property is a member of the style object in IE 5/Mac and Netscape 6, only IE 5/Mac renders the outline.
Value
Space-delimited string. For the outlineStyle and outlineWidth component values, see the respective properties in this chapter. For details on the outlineColor value, see the section about CSS colors at the beginning of Chapter 11.
Default
None.

outlineColor | NN 6 IE 5(Mac) DOM 2
| Read/Write
Controls the color of an outline.
Example
    document.getElementById("announce").style.outlineColor = "rgb(100, 75, 0)";
Value
CSS color value or constant invert. For details on CSS color values, see the section about colors at the beginning of Chapter 11.
Default
invert

outlineStyle | NN 6 IE 5(Mac) DOM 2
| Read/Write
Controls the line type of an outline.
Example
    document.getElementById("announce").style.outlineStyle = "solid";
Value
Style values are case-insensitive constants that are associated with specific ways of rendering outline (and border) lines. The CSS style constants are: dashed, dotted, double, groove, hidden, inset, none, outset, ridge, and solid.
Default
none

outlineWidth | NN 6 IE 5(Mac) DOM 2
| Read/Write
Controls the thickness of the outline lines.
Example
    document.getElementById("announce").style.outlineWidth = "2px";
Value
Three case-insensitive constantsthin | medium | thickallow the browser to define exactly how many pixels are used to show the border. For more precision, you can also assign a length value (see the discussion of CSS length values at the beginning of Chapter 11).
Default
medium

overflow | NN 6 IE 4 DOM 2
| Read/Write
Specifies how a positioned element should treat content that extends beyond the boundaries established in the style sheet rule. See the discussion of the overflow style sheet attribute in Chapter 11 for details.
Example
    document.getElementById("myDiv").style.overflow = "scroll";
Value
Any of the following constants as a string: auto | hidden | scroll | visible.
Default
visible

overflowX, overflowY | NN n/a IE 5(Win) DOM n/a
| Read/Write
Specify how a positioned element should treat content that extends beyond the horizontal (overflowX) or vertical (overflowY) boundaries established in the style sheet rule.
Example
    document.getElementById("myDiv").style.overflow X= "scroll";
Value
Any of the following constants as a string: auto | hidden | scroll | visible.
Default
visible

padding | NN 6 IE 4 DOM 2
| Read/Write
This is a shortcut property that can set the padding widths of up to four edges of an element with one statement. Padding is space that extends around the content box of an element up to but not including any border that may be specified for the element. Padding picks up the background image or color of its element. As you add padding to an element, you increase the size of the visible rectangle of the element without affecting the content block size. You may supply one to four space-delimited padding values. The number of values determines which sides receive the assigned padding.
Example
    document.getElementById("logoWrapper").style.padding = "3px 5px";
Value
This property accepts one, two, three, or four space-delimited values inside one string, depending on how many and which edges you want to pad. See the padding attribute listing in Chapter 11 for complete details on how the number of values affects this property. Values for padding widths can be lengths, percentages of the next outermost element size, or the auto constant.
Default
0

paddingBottom, paddingLeft, paddingRight, paddingTop | NN 6 IE 4 DOM 2
| Read/Write
All four properties set the width of a single padding edge of an element. Padding is space that extends between the element's border and content box. Padding is not calculated as part of the element's width or height.
Example
    document.getElementById("logoWrapper").style.paddingTop = "3px";
    document.getElementById("navPanel").style.paddingLeft = "10%";
Value
Values for padding widths can be length values, percentages of the next outermost element size, or the auto constant.
Default
0

page | NN 6 IE 5(Mac) DOM 2
| Read/Write
Points to the name of an existing @page rule (when the rule contains an identifier, such as @page figures {size: landscape}) in order to apply that rule to the current block-level element. Although this property is a member of the style object in IE 5/Mac and Netscape 6, neither the style attribute nor scripted changes to it affect the printed output.
Value
String identifier.
Default
None.

pageBreakAfter, pageBreakBefore | NN 6 IE 4 DOM 2
| Read/Write
Define how content should treat a page break around an element when the document is sent to a printer. Page breaks are not rendered in the visual browser as they may be in word processing programs; on screen, long content flows in one continuous scroll on the screen. Also see the extensive discussion of page breaks in the listing for the page-break-after and page-break-before style attributes in Chapter 11.
Example
    document.getElementById("hardBR").style.pageBreakAfter = "always";
    document.getElementById("navPanel").style.paddingLeft = "10%";
Value
All supporting browsers recognize four constant values (as strings): always | auto | left | right. Additionally, IE for Windows supports an empty string, which has the same effect as the W3C CSS avoid constant.
Default
auto

pageBreakInside | NN 6 IE 5(Mac) DOM 2
| Read/Write
Defines whether the element allows itself to be split across printed pages. Although this property is a member of the style object in IE 5/Mac and Netscape 6, neither the style attribute nor scripted changes to it affect the printed output.
Value
A constant value (as a string): auto | avoid.
Default
auto

pause, pauseAfter, pauseBefore, pitch, pitchRange |
See azimuth.

pixelBottom, pixelLeft, pixelRight, pixelTop | NN n/a IE 4 DOM n/a
| Read/Write
For positionable elements, these properties define the pixel position of the edges of an element's box (content plus padding, border, and/or margin) relative to the corresponding edges of the next outermost block content container. When the element is relative-positioned, the measure is based on the edges of the inline location of where the element would normally appear in the content. Use these properties for calculation (including path animation) instead of the bottom, left, right, and top properties, which store their values as strings with the unit names. Available as a property of the IE style and runtimeStyle objects only.
Example
    document.getElementById("myDIV").style.pixelLeft++;
Value
Integer.
Default
None.

pixelHeight, pixelWidth | NN n/a IE 4 DOM n/a
| Read/Write
Specify the height and width of the element in pixels. Use these properties for calculation instead of properties such as height and width, which return strings including units. Changes to these properties may not be visible unless the element has its position style attribute set. Available as a property of the IE style and runtimeStyle objects only.
Example
    var midWidth = document.getElementById("myDIV").style.pixelWidth/2;
Value
Integer
Default
None.

playDuring |
See azimuth.

posBottom, posLeft, posRight, posTop | NN n/a IE 4 DOM n/a
| Read/Write
For positionable elements, these properties define the position of the edges of an element's box (content plus padding, border, and/or margin) relative to the corresponding edges of the next outermost block content container. When the element is relative-positioned, the measure is based on the edges of the inline location where the element would normally appear in the content. Most importantly, these properties' values are numeric and in the unit of measure set in the CSS bottom, left, right, or top attribute. Use these properties for calculation (including path animation) instead of the bottom, left, right, and top properties, which store their values as strings with the unit names. All math is in the specified units. Also contrast these properties with the pixelBottom, pixelLeft, pixelRight, and pixelTop properties, which are integer values for pixel measures only. Available as a property of the IE style and runtimeStyle objects only.
Example
    document.getElementById("myDIV").style.posLeft =
      document.getElementById("myDIV").style.posLeft + 1.5;
Value
Floating-point number.
Default
None.

posHeight, posWidth | NN n/a IE 4 DOM n/a
| Read/Write
Specify the numeric height and width of the element in the units set by the CSS positioning-related attributes. Use these properties for calculation instead of properties such as height and width, which return strings including units. All math is in the specified units. Also contrast these properties with the pixelHeight and pixelWidth properties, which are integer values for pixel measures only. Available as a property of the IE style and runtimeStyle objects only.
Example
    document.getElementById("myDIV").style.posWidth = 10.5;
Value
Floating-point number.
Default
None.

position | NN 6 IE 4 DOM 2
| Read-only
For positionable elements, returns the value assigned to the style sheet position attribute. This property is actually read/write, but you cannot change a positioned element into a static one or vice-versa.
Example
    var posType = document.getElementById("myDIV").style.position;
Value
String constant: absolute | fixed | relative | static. The fixed value is not supported in IE for Windows through Version 6.
Default
None.

quotes | NN 6 IE 5(Mac) DOM 2
| Read/Write
Assigns pairs of characters to be used as quote marks (especially for the q element). Although the property is available for IE 5 Macintosh and Netscape 6, only Netscape 6 responds to the CSS attributes, and neither responds to reading or writing the quotes property value.
Value
A string consisting of two or four quoted strings (nested quotes). The first pair provides characters for first-level quotes; the second pair supplies characters to nested quotes.
Default
None.

readyState | NN n/a IE 4 DOM n/a
| Read-only
Returns the current download status of the object's content. If a script (especially one initiated by a user event) can perform some actions while the document is still loading, but must avoid other actions until the entire page has loaded, this property provides intermediate information about the loading process. You should use its value in condition tests. The value of this property changes during loading as the loading state changes. Each change of the property value fires an onReadyStateChange event (the event does not bubble).
When introduced with IE 4, the property was available for only the document, embed, img, link, object, script, and style objects. IE 5 expanded coverage to all HTML element objects.
Example
    if (document.readyState == "loading") {
    		    //statements for alternate handling while loading
    		}
Value
For all but the object element, one of the following values (as strings): uninitialized | loading | loaded | interactive | complete. Some elements may allow the user to interact with partial content, in which case the property may return interactive until all loading has completed. Not all element types return all values in sequence during the loading process. The object element returns numeric values for these five states. They range from 0 (uninitialized) to 4 (complete).
Default
None.

richness |
See azimuth.

right | NN 6 IE 5 DOM 2
| Read/Write
For an absolute-positioned element, defines the position of the right edge of an element's box (content plus right padding, border, and/or margin) relative to the right edge of the next outermost block content container.
For numeric calculations on this value in IE, retrieve the pixelRight or posRight style properties, which return genuine numeric values.
Example
    document.getElementById("blockD2").style.right = "25px";
Value
String consisting of a numeric value and length unit measure, a percentage, or auto.
Default
auto

rubyAlign | NN n/a IE 5 DOM n/a
| Read/Write
Controls alignment of content in a ruby element. Changes to this property affect IE for Windows only. Ruby-related styles are defined in CSS3.
Example
    document.getElementById("myRuby").style.rubyAlign = "center";
Value
Case-insensitive string of any of the following constants: auto | center | distribute-letter | distribute-space | left | line-edge | right.
Default
auto

rubyOverhang | NN n/a IE 5 DOM n/a
| Read/Write
Controls text overhang characteristics of content in a ruby element. Changes to this property affect IE for Windows only. Ruby-related styles are defined in CSS3.
Example
    document.getElementById("myRuby").style.rubyOverhang="whitespace";
Value
Case-insensitive string of any of the following constants: auto | none | whitespace.
Default
auto

rubyPosition | NN n/a IE 5 DOM n/a
| Read/Write
Controls whether ruby (rt element) text renders on the same line or above its related ruby base (rb element) text. Changes to this property affect IE for Windows only. Ruby-related styles are defined in CSS3.
Example
    document.getElementById("myRuby").style.rubyPosition = "inline";
Value
Case-insensitive string of any of the following constants: above | inline.
Default
above

scrollbar3dLightColor, scrollbarArrowColor, scrollbarBaseColor, scrollbarDarkShadowColor, scrollbarFaceColor, scrollbarHighlightColor, scrollbarShadowColor, scrollbarTrackColor | NN n/a IE 5.5(Win) DOM n/a
| Read/Write
Controls the colors for specific components of a scrollbar user interface element associated with an applet, body, div, embed, object, or textarea element. See the description of these CSS attributes in Chapter 11 for details about which component each property governs.
Example
    document.getElementById("comments").style.scrollbarArrowColor = "rgb(100, 75, 0");
Value
Case-insensitive CSS color specification (see discussion at beginning of Chapter 11).
Default
None.

size | NN 6 IE n/a DOM 2
| Read/Write
For a page context defined by an @page rule, this property controls the page size or orientation. Although the property is available for Netscape 6, the value is an empty strings and the property has no influence over the page context.
Value
CSS length values (as a string) or case-insensitive string of any of the following constants: auto | landscape | portrait. For length values, a single value is applied to height and width; two space-delimited length values are applied to width and height, respectively.
Default
auto

speak, speakHeader, speakNumeral, speakPunctuation, speechRate, stress |
See azimuth.

styleFloat | NN n/a IE 4 DOM n/a
| Read/Write
Specifies on which side of the containing box the element aligns so that other content wraps around the element. When the property is set to none, the element appears in its source code sequence, and at most one line of surrounding text content appears in the same horizontal band as the element. See the float style attribute in Chapter 11 for more details. IE 5 for Macintosh duplicates this property as cssFloat, the DOM 2 version, which is also supported (by itself) in Netscape 6.
Example
    document.getElementById("myDIV").style.styleFloat = "right";
Value
One of the following constants (as a string): none | left | right.
Default
None.

tableLayout | NN 6 IE 5 DOM 2
| Read/Write
Acts as a switch at load time to direct the browser to start rendering the table based on column widths set by the first row, or wait until the table data is loaded so that the browser can calculate optimum column widths based on cell contents. Changes to this property have no effect on a rendered table.
Example
    document.getElementById("myTable").style.tableLayout = "fixed";
Value
One of the following constants (as a string): auto | fixed.
Default
auto

textAlign | NN 6 IE 4 DOM 2
| Read/Write
Determines the horizontal alignment of text within an element's box.
Example
    document.getElementById("myDIV").style.textAlign = "right";
Value
One of the four constants (as a string): center | justify | left | right.
Default
Depends on default language of the browser.

textAlignLast | NN n/a IE 5.5(Win) DOM n/a
| Read/Write
Determines the horizontal alignment of the last line of text within an element's box. This style attribute may be helpful to obtain the desired look if you use some of the other proprietary text alignment style attributes in IE 5.5 or later for Windows.
Example
    document.getElementById("myDIV").style.textAlignLast = "justify";
Value
One of the following constants (as a string): auto | center | justify | left | right.
Default
auto

textAutospace | NN n/a IE 5(Win) DOM n/a
| Read/Write
Controls the spacing between ideographic (typically Asian languages) and nonideographic characters.
Example
    document.getElementById("myDIV").style.textAutospace = "ideograph-numeric";
Value
One of the following constants (as a string): ideograph-alpha | ideograph-numeric | ideograph-parenthesis | ideograph-space | none.
Default
none

textDecoration | NN 6 IE 4 DOM 2
| Read/Write
Specifies additions to the text content of the element in the form of underlines, strikethroughs, overlines, and (in Navigator and CSS) blinking. Browsers use this style attribute internally to assign by default underlines to a elements and strikethroughs to strike elements, so the default value varies with element type. You may specify more than one decoration style by supplying values in a space-delimited list. While browsers accept the (CSS optional) blink value, they (thankfully) do not cause the text to blink. Text decoration has an unusual parent-child relationship. Values are not inherited, but the effect of a decoration carries over to nested items in most cases. Therefore, unless otherwise overridden, an underlined p element underlines a nested b element within. Internet Explorer also includes Boolean properties for each decoration type.
Example
    document.getElementById("emphasis").style.textDecoration = "underline";
Value
In addition to none, any of the following four constants (as a string): blink | line-through | overline | underline. Multiple values may be included in the string as a space-delimited list.
Default
Element and internal style sheet dependent.

textDecorationBlink, textDecorationLineThrough, textDecorationNone, textDecorationOverline, textDecorationUnderline | NN n/a IE 4 DOM n/a
| Read/Write
Specifies whether the specified text decoration feature is enabled for the element. Each of these properties corresponds to a value that can be assigned to the text-decoration style attribute in CSS (see Chapter 11). Internet Explorer does not blink text, so the textDecorationBlink property is ignored. Setting textDecorationNone to true sets all other related properties to false. Setting these properties on the Macintosh version of IE 4 does not alter the content. Use the textDecoration property insteadgood practice all around.
Example
    document.getElementById("emphasis").style.textDecorationLineThrough = "true";
Value
Boolean value: true | false.
Default
false

textIndent | NN 6 IE 4 DOM 2
| Read/Write
Specifies the size of the indent at the first line of a block of inline text (such as a p element). Only the first line is affected by this setting. A negative value can be used to outdent the first line, but be sure the text does not run beyond the left edge of the browser window or frame.
Example
    document.getElementById("firstGraph").style.textIndent = "0.5em";
Value
Positive or negative CSS length value (see Chapter 11) as a string.
Default
0px

textJustify | NN n/a IE 5 DOM n/a
| Read/Write
Specifies detailed character distribution techniques for any block-level element that has a text-align CSS attribute or a textAlign style property set to justify.
Example
    document.getElementById("inset").style.textJustify = "distribute-center-last";
Value
One of the following constants (as a string): auto | distribute | distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashdia | newspaper. See the text-justify attribute in Chapter 11 for details on the meanings of these values.
Default
auto

textKashidaSpace | NN n/a IE 5.5(Win) DOM n/a
| Read/Write
For Arabic text in a block-level element with a text alignment style that is set to justify, controls the ratio of kashida expansion to white space expansion.
Example
    document.getElementById("inset").style.textKashidaSpace = "15%";
Value
Percentage value as a string.
Default
0%

textOverflow | NN n/a IE 6(Win) DOM n/a
| Read/Write
Controls whether text content that overflows a fixed box should display an ellipsis (...) at the end of the line to indicate more text is available. The element should also have its overflow style attribute or property set to hidden.
Example
    document.getElementById("textBox").style.textOverflow = "ellipsis";
Value
One of the allowable constant string value: clip | ellipsis.
Default
clip

textShadow | NN 6 IE 5(Mac) DOM 2
| Read/Write
Controls the specifications for shadow effects on the element's text. Although this property is a member of the style object in IE 5/Mac and Netscape 6, neither the style attribute nor scripted changes to it affect the element's text display.
Value
A string consisting of one or more shadow specifications. Each shadow specification consists of space-delimited values for a color, a length for the offset to the right of the text, a length for the offset below the text, and an optional blur radius value. Multiple shadow specifications are comma-delimited or a value of none to turn off the shadow.
Default
none

textTransform | NN 6 IE 4 DOM 2
| Read/Write
Controls the capitalization of the element's text. When a value other than none is assigned to this attribute, the cases of all letters in the source text are arranged by the style sheet, overriding the case of the source text characters.
Example
    document.getElementById("heading").style.textTransform = "capitalize";
Value
A value of none allows the case of the source text to be rendered as is. Other available constant values (as strings) are: capitalize | lowercase | uppercase. A value of capitalize sets the first character of every word to uppercase. Values lowercase and uppercase render all characters of the element text in their respective cases.
Default
none

textUnderlinePosition | NN n/a IE 5.5(Win) DOM n/a
| Read/Write
Controls whether an underline (i.e., an element with a text-decoration style set to underline) is rendered above or below the text.
Example
    document.getElementById("heading").style.textUnderlinePosition = "above";
Value
IE 5.5 recognizes two constant values: above | below. IE 6 adds the values auto and auto-pos (which appear to do the same thing). The default value also changed between versions, from below to auto. In IE 6, the auto value underlines vertical Japanese text "above" (to the right) of the characters.
Default
none (IE 5.5); auto (IE 6).

top | NN 6 IE 4 DOM 2
| Read/Write
For positionable elements, defines the position of the top edge of an element's box (content plus top padding, border, and/or margin) relative to the top edge of the next outermost block content container. When the element is relative-positioned, the offset is based on the top edge of the inline location of where the element would normally appear in the content.
For calculations on this value, use parseFloat( ) on the returned value; or, in IE, retrieve the pixelTop or posTop properties, which return genuine numeric values.
Example
    document.getElementById("blockD2").style.top = "40px";
Value
String consisting of a numeric value and length unit measure, a percentage, or auto.
Default
auto

unicodeBidi | NN 6 IE 5 DOM 2
| Read/Write
Controls the embedding of bidirectional text (such as a mixture of French and Arabic) in concert with the direction style attribute.
Example
    document.getElementById("blockD2").style.unicodeBidi = "bidi-override";
Value
String constant values: bidi-override | embed | normal.
Default
normal

verticalAlign | NN 6 IE 4 DOM 2
| Read/Write
Specifies the vertical alignment characteristic of the element. This property operates in two spheres, depending on the selection of values you use. See the in-depth discussion of the vertical-align style sheet property in Chapter 11 for details.
Example
    document.getElementById("myDIV").style.verticalAlign = "text-top";
Value
String value of an absolute measure (with units), a percentage (relative to the next outer box element), or one of the many constant values: bottom | top | baseline | middle | sub | super | text-bottom | text-top.
Default
baseline

visibility | NN 6 IE 4 DOM 2
| Read/Write
Specifies the state of the positioned element's visibility. Surrounding content does not close up the space left by an element that has its visibility property set to hidden.
Example
    document.getElementById("myDIV").style.visibility = "hidden";
Value
One of the constant values (as a string): collapse | hidden | inherit | visible.
Default
visible

voiceFamily, volume |
See azimuth.

whiteSpace | NN 6 IE 5(Mac)/5.5(Win) DOM 2
| Read/Write
Controls intepretation of whitespace (such as leading spaces and line breaks) from the source code.
Example
    document.getElementById("myDIV").style.whiteSpace = "pre";
Value
One of the constant values (as a string): normal | nowrap | pre. Value of normal allows browsers to word-wrap lines in block elements and ignore leading spaces. Value of nowrap causes source code not to word-wrap, but still ignores leading spaces. Value of pre preserves leading spaces, extra spaces, and carriage returns in the source code. Note that IE 6 for Windows does not respond to the pre value unless the DOCTYPE element values place the browser into standards compatibility mode.
Default
normal

widows |
See orphans.

width |
See height.

wordBreak | NN n/a IE 5(Win) DOM n/a
| Read/Write
Specifies the word-break style for ideographic languages or content that mixes Latin and ideographic languages.
Example
    document.getElementById("myDIV").style.wordBreak = "keep-all";
Value
One of the constant values (as a string): break-all | keep-all | normal.
Default
normal

wordSpacing | NN 6 IE 4 DOM 2
| Read/Write
Governs the length of space between words. IE 5 for Macintosh may exhibit overlap problems with the word-spacing of elements nested inside the one being controlled.
Example
    document.getElementById("myDIV").style.wordSpacing = "1.0em";
Value
CSS length value (as a string) or the constant normal.
Default
normal

wordWrap | NN n/a IE 5.5(Win) DOM n/a
| Read/Write
Specifies the word-wrapping style for block-level, specifically-sized inline, or positioned elements. If a single word (i.e., without any whitespace) extends beyond the width of the element containing box, the normal behavior is to extend the content beyond the normal box width, without breaking. But you can force the long word to break at whatever character position occurs at the edge of the box.
Example
    document.getElementById("myDIV").style.wordWrap = "break-word";
Value
One of the constant values (as a string): break-word | normal.
Default
normal

writingMode | NN n/a IE 5.5(Win) DOM n/a
| Read/Write
Intended primarily for languages that display characters in vertical sentences, this controls the progression of content, left-to-right, or right-to-left.
Example
    document.getElementById("myDIV").style.writingMode = "lr-tb";
Value
One of the constant values (as a string): lr-tb | tb-rl. Value of tb-rl can rotate text of some languages by 90 degrees.
Default
lr-tb

zIndex | NN 6 IE 4 DOM 2
| Read/Write
For a positioned element, this specifies the stacking order relative to other elements within the same parent container. See Chapter 4 for details on relationships of element layering amid multiple containers.
Example
    document.getElementById("myDIV").style.zIndex = "3"
Value
Integer. Netscape 6 prefers that this value be in string form (that's how the property returns its value), while IE returns a number.
Default
0

zoom | NN n/a IE 5.5(Win) DOM n/a
| Read/Write
Governs the magnification of rendered content. Particularly useful for output that might be displayed on monitors with very high pixel density. See screen.logicalXDPI property.
Example
    document.body.style.zoom = "200%";
Value
Percentage value (where 100% is normal), floating-point multiplier (where 1.0 is normal), or constant normal.
Default
normal

getPropertyCSSValue( ) | NN n/a IE n/a DOM 2
getPropertyCSSValue("CSSAttributeName") |
Returns an object that represents a CSS value. In the W3C DOM, the CSSValue object returned from this method has properties that reveal the text of the attribute/value pair and a numeric value corresponding to a long list of primitive value types (indicating types such as percentage, pixel lengths, and RGB color). Although this method is implemented in Netscape 6, it returns an empty object for now.
Parameters
The CSS attribute name from an inline style declaration (not the DOM version of the property name).
Returned Value
Reference to a CSSValue object.

getPropertyPriority( ) | NN 6 IE 5(Mac) DOM 2
getPropertyPriority("CSSAttributeName") |
Returns the string value of any priority (such as !important) associated with the inline CSS attribute.
Parameters
The CSS attribute name from an inline style declaration (not the DOM version of the property name).
Returned Value
String.

getPropertyValue( ) | NN 6 IE 5(Mac) DOM 2
getPropertyValue("CSSAttributeName") |
Returns the string value of the inline CSS attribute/value pair.
Parameters
The CSS attribute name from an inline style declaration (not the DOM version of the property name).
Returned Value
String.

item( ) | NN 6 IE 5(Mac) DOM 2
item(index) |
Returns the attribute name of the inline CSS attribute/value pair corresponding to the integer index value in source code order.
Parameters
Zero-based integer corresponding to the specified inline CSS attribute/value pair in source code order.
Returned Value
String. IE for Macintosh returns name in all-uppercase characters, while Netscape 6 returns all-lowercase characters.

removeProperty( ) | NN 6 IE n/a DOM 2
removeProperty("CSSAttributeName") |
Deletes the inline CSS attribute/value pair and returns a string with the previous value.
Parameters
The CSS attribute name from an inline style declaration (not the DOM version of the property name).
Returned Value
String.

runtimeStyle | NN n/a IE 5 DOM n/a
| Read/Write
Returns a style object whose individual style properties convey values only if they are explicitly set via the regular style sheet processes. Unlike the currentStyle object, system default style sheet properties are not reflected. You can set individual style properties of this runtimeStyle object, but doing so transcends (some might say violates) normal cascading precedence. Any property you assign by script overrides all other settings for that style property governing that element, including values assigned to the element tag's style attribute and style property. For example, if you assign the value red to an element's style.color property, and assign the value green to the same element's runtimeStyle.color property, the element's text appears in green, even though the more specific style.color property still preserves the red value. At that point the element's currentStyle.color property also returns green, because that is the effective style governing the element at that instant.
You can use the runtimeStyle object to assign multiple style properties by reassigning a CSS syntax rule to the runtimeStyle.cssText property. Assign an empty string to the cssText property to remove all in-line attribute values, allowing the regular style sheet cascade to control the element's effective style.
Example
    document.getElementById("elementID").runtimeStyle.cssText =
    		  "border: 5px blue solid";
Value
style object reference.
Default
The effective style object and its explicitly defined style attribute values.

setExpression( ) | NN n/a IE 5(Win) DOM n/a
setExpression("propertyName", "expression", ["scriptLanguage"]) |
Assigns a script expression to an element object's property as a way to calculate dynamically a value for the property. This method works with properties of element objects and their style objects if you like. The expression is re-evaluated automatically for most user-oriented events, or you may explicitly force re-evaluation at any time via the recalc( ) method.
Assigning an expression to an element attribute can take the place of some event handling, such as maintaining position relationships among elements when a user resizes the browser window. For example, to keep an element horizontally centered in the browser window, you could use one of the following techniques to apply an expression to the element's style.left property. The first example demonstrates the syntax (also for IE 5 for Windows or later) for assigning an expression as an inline attribute for the the element:
Alternatively, a function invoked at load time could include the following statement:
In both cases, the same expression calculates the coordinate position for the element's left edge relative to the current viewable width of the body element. Because this expression depends on a body element dimension property, the browser knows that it should re-evaluate any expression that might be impacted by a change in the body size caused by window resizing.
Be sure the resulting value of the expression you assign is the desired data type for the attribute you are setting. Isolate and run some initial tests on the expression before assigning it to the setExpression( ) method. Otherwise debugging will be more difficult.
If you want an expression to assign a value to an attribute and force that value to stick, use the removeExpression( ) method to prevent any further re-evaluation of the attribute value.
Parameters
The name of the attribute being controlled by the expression, but in case-sensitive property name form (e.g., use the className property name instead of the corresponding class attribute name). A string that contains the script expression to be evaluated. The expression must evaluate to a value suitable for the property named in the first parameter, so multiple, semicolon-delimited statements are not allowed. References to other elements should be complete references. Early implementations may balk at references that include arrays. One of three constant strings: JScript | JavaScript | VBScript. The default is JScript.
Returned Value
None.

setProperty( ) | NN 6 IE 5(Mac) DOM 2
setProperty("CSSAttributeName", "value", "priority") |
Sets an inline style attribute/value pair. If the attribute already exists, the new value is applied to the existing attribute; otherwise the attribute and value are added to the element.
Parameters
The CSS attribute name from an inline style declaration (not the DOM version of the property name). String of the value in the format applicable to the attribute. String of the priority assignment (such as !important) or empty string.
Returned Value
None.