style, CSSStyleDeclarationNN 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
 
acceleratorazimuthbackground
backgroundAttachmentbackgroundColorbackgroundImage
backgroundPositionbackgroundPositionXbackgroundPositionY
backgroundRepeatbehaviorblockDirection
borderborderBottomborderBottomColor
borderBottomStyleborderBottomWidthborderCollapse
borderColorborderLeftborderLeftColor
borderLeftStyleborderLeftWidthborderRight
borderRightColorborderRightStyleborderRightWidth
borderSpacingborderStyleborderTop
borderTopColorborderTopStyleborderTopWidth
borderWidthbottomcaptionSide
clearclipclipBottom
clipLeftclipRightclipTop
colorcontentcounterIncrement
counterResetcssFloatcssText
cuecueAftercueBefore
cursordirectiondisplay
elevationemptyCellsfilter
fontfontFamilyfontSize
fontSizeAdjustfontStretchfontStyle
fontVariantfontWeightheight
imeModelayoutFlowlayoutGrid
layoutGridCharlayoutGridLinelayoutGridMode
layoutGridTypeleftletterSpacing
lineBreaklineHeightlistStyle
listStyleImagelistStylePositionlistStyleType
marginmarginBottommarginLeft
marginRightmarginTopmarkerOffset
marksmaxHeightmaxWidth
minHeightminWidthMozBinding
MozOpacityorphansoutline
outlineColoroutlineStyleoutlineWidth
overflowoverflowXoverflowY
paddingpaddingBottompaddingLeft
paddingRightpaddingToppage
pageBreakAfterpageBreakBeforepageBreakInside
pausepauseAfterpauseBefore
pitchpitchRangepixelBottom
pixelHeightpixelLeftpixelRight
pixelToppixelWidthplayDuring
posBottomposHeightposLeft
posRightposTopposWidth
positionquotesrichness
rightrubyAlignrubyOverhang
rubyPositionscrollbar3dLightColorscrollbarArrowColor
scrollbarBaseColorscrollbarDarkShadowColorscrollbarFaceColor
scrollbarHighlightColorscrollbarShadowColorscrollbarTrackColor
sizespeakspeakHeader
speakNumeralspeakPunctuationspeechRate
stressstyleFloattableLayout
textAligntextAlignLasttextAutospace
textDecorationtextDecorationBlinktextDecorationLineThrough
textDecorationNonetextDecorationOverlinetextDecorationUnderline
textIndenttextJustifytextKashidaSpace
textOverflowtextShadowtextTransform
textUnderlinePositiontopunicodeBidi
verticalAlignvisibilityvoiceFamily
volumewhiteSpacewidows
widthwordBreakwordSpacing
wordWrapwritingModezIndex
zoom
 
Object-Specific Methods
 
getPropertyCSSValue( )getPropertyPriority( )getPropertyValue( )
item( )removeProperty( )setProperty( )
 
Object-Specific Event Handler Properties

None.

acceleratorNN 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, volumeNN 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.

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

backgroundAttachmentNN 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

backgroundColorNN 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

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

backgroundPositionNN 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 pairPercentage equivalentsConstant value pairPercentage equivalents
top left0% 0%center center50% 50%
left top0% 0%right 100% 50%
top50% 0%right center100% 50%
top center50% 0%center right100% 50%
center top50% 0%bottom left0% 100%
right top100% 0%left bottom0% 100%
top right100% 0%bottom50% 100%
left0% 50%bottom center50% 100%
left center0% 50%center bottom50% 100%
center left0% 50%bottom right 100% 100%
center50% 50%right bottom100% 100%
 
Default

0% 0%

backgroundPositionX, backgroundPositionYNN 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

backgroundRepeatNN 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

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

blockDirectionNN 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

borderNN 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, borderTopNN 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, borderTopColorNN 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, borderTopStyleNN 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, borderTopWidthNN 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

borderCollapseNN 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

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

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

borderStyleNN 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

borderWidthNN 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

bottomNN 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

captionSideNN 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

clearNN 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

clipNN 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, clipTopNN 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.

colorNN 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

contentNN 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, counterResetNN 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.

cssFloatNN 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

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

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

cursorNN 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 nameIE/WindowsIE/MacNN
aliasn/an/a6
all-scroll6n/an/a
auto446
celln/an/a6
col-resize6n/an/a
context-menun/an/a6
copyn/an/a6
count-downn/an/a6
count-upn/an/a6
count-up-downn/an/a6
crosshair446
default446
e-resize446
grabn/an/a6
grabbingn/an/a6
hand44n/a
help446
move446
n-resize446
ne-resize446
no-drop6n/an/a
not-allowed6n/an/a
nw-resize446
pointer446
progress6n/an/a
row-resize6n/an/a
s-resize446
se-resize446
spinningn/an/a6
sw-resize446
text446
url(uri) 6n/an/a
vertical-text6n/an/a
w-resize446
wait446
 
Default

auto

directionNN 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

disabledNN 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

displayNN 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 typeIE/WindowsIE/MacNN
block546
inline546
inline-block5.5n/an/a
none446
run-inn/a56
table-footer-group5.556
table-header-group556
 
Default

Element-dependent.

elevation  

  

See azimuth.

emptyCellsNN 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

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

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

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

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

fontSizeAdjustNN 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

fontStretchNN 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

fontStyleNN 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

fontVariantNN 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

fontWeightNN 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, widthNN 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.

imeModeNN 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

layoutFlowNN 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

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

layoutGridCharNN 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

layoutGridLineNN 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

layoutGridModeNN 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

layoutGridTypeNN 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

leftNN 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

letterSpacingNN 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

lineBreakNN 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

lineHeightNN 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

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

listStyleImageNN 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

listStylePositionNN 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

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

 
TypeExample
decimal1, 2, 3, ...
decimal-leading-zero01, 02, 03, ...
lower-alphaa, b, c, ...
lower-greek, , , ...
lower-romani, ii, iii, ...
upper-alphaA, B, C, ...
upper-romanI, II, III, ...
 
Default

disc (for ul); decimal (for ol).

marginNN 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, marginTopNN 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

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

marksNN 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, minWidthNN 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.

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

MozOpacityNN 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, widowsNN 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.

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

outlineColorNN 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

outlineStyleNN 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

outlineWidthNN 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

overflowNN 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, overflowYNN 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

paddingNN 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, paddingTopNN 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

pageNN 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, pageBreakBeforeNN 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

pageBreakInsideNN 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, pixelTopNN 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, pixelWidthNN 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, posTopNN 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, posWidthNN 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.

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

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

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

rubyAlignNN 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

rubyOverhangNN 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

rubyPositionNN 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, scrollbarTrackColorNN 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.

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

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

tableLayoutNN 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

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

textAlignLastNN 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

textAutospaceNN 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

textDecorationNN 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, textDecorationUnderlineNN 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

textIndentNN 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

textJustifyNN 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

textKashidaSpaceNN 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%

textOverflowNN 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

textShadowNN 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

textTransformNN 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

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

topNN 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

unicodeBidiNN 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

verticalAlignNN 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

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

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

wordBreakNN 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

wordSpacingNN 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

wordWrapNN 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

writingModeNN 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

zIndexNN 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

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

runtimeStyleNN 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:

<div id="heading" style="position:absolute; left:expression(
  document.body.clientWidth/2-document.getElementById("heading").offsetWidth/2);
 

Alternatively, a function invoked at load time could include the following statement:

document.getElementById("heading").style.setExpression("left", 
 "document.body.clientWidth/2-document.getElementById('heading').offsetWidth/2;", 
 "JScript");
 

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.