Alphabetical Object Reference (Dynamic HTML: The Definitive Reference, 2nd Edition)

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 element—the effective style definition—may 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

All: [window.]document.getElementById("elementID").style
IE: [window.]document.styleSheets[i].rules[j].style
NN: [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.

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%

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..

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 borderSideStyle and borderSideWidth component values, see the respective properties in this chapter. For details on the borderSideColor 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 constants—thin | medium | thick—allow 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 constants—thin | medium | thick—allow 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:
BORDER-RIGHT: red 3px groove; BORDER-TOP: red 3px groove; BORDER-LEFT: red 3px groove; BORDER-BOTTOM: red 3px groove
IE for Macintosh reports:
{BORDER-TOP: 3px groove red; BORDER-RIGHT: 3px groove red; BORDER-BOTTOM: 3px groove red; BORDER-LEFT: 3px groove red}
And Netscape 6 reports:
border: 3px groove red;
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.

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.

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

The IE 6 setting of an external URL requires an address of a cursor file of extension .cur or .ani.

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

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 properties—fontFamily, fontSize, lineHeight (which must be preceded by a / symbol in this property), fontStyle, fontVariant, and fontWeight—with 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.

Exaple

document.getElementById("announce").style.outline = "solid blue 4px";

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 constants—thin | medium | thick—allow 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.

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 instead—good 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.

Returned Value

Reference to a CSSValue object.

Parameters

CSSAttributeName

The CSS attribute name from an inline style declaration (not the DOM version of the property name).

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.

Returned Value

String.

Parameters

CSSAttributeName

The CSS attribute name from an inline style declaration (not the DOM version of the property name).

getPropertyValue( ) NN 6 IE 5(Mac) DOM 2
getPropertyValue("CSSAttributeName")
Returns the string value of the inline CSS attribute/value pair.

Returned Value

String.

Parameters

CSSAttributeName

The CSS attribute name from an inline style declaration (not the DOM version of the property name).

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.

Returned Value

String. IE for Macintosh returns name in all-uppercase characters, while Netscape 6 returns all-lowercase characters.

Parameters

index

Zero-based integer corresponding to the specified inline CSS attribute/value pair in source code order.

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.

Returned Value

String.

Parameters

CSSAttributeName

The CSS attribute name from an inline style declaration (not the DOM version of the property name).

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.

Returned Value

None.

Parameters

CSSAttributeName

The CSS attribute name from an inline style declaration (not the DOM version of the property name).

value

String of the value in the format applicable to the attribute.

priority

String of the priority assignment (such as !important) or empty string.

9.6. Alphabetical Object Reference

HTML Equivalent

Object Model Reference

Object-Specific Properties

Object-Specific Methods

Object-Specific Event Handler Properties

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Value

Default

Value

Default

Example

Value

Default

Example

Value

Default

Example

Value

Default

Value

Default

Example

Value

Default

Example

Value