818 Part III ✦ Document Objects Reference Controls: Distance between the edges of a marker box (content whose display is of a marker type) and a block-level element’s box. Note: The style attribute for this property is not implemented in IE5/Mac or NN6, but the property is listed as valid for a style object. Value: Length; Constant auto Example: elementRef.style.markerOffset = “2em” marks IE/Windows IE/Mac NN W3C CSS2 Compatibility — 56 Yes Controls: Rendering of crop marks and the like on the printed page. Note: The style attribute for this property is not implemented in IE5/Mac or NN6, but the property is listed as valid for a style object. Value: Constant crop || cross | none Example: elementRef.style.marks = “crop” maxHeight maxWidth minHeight minWidth IE/Windows IE/Mac NN W3C CSS2 Compatibility — 56 Yes Controls: Maximum or minimum height or width of an element. The corresponding style attribute is implemented in NN6. Value: Length; Percentage; Constant (for max properties only) none Example: elementRef.style.maxWidth = “300px” overflow IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes elementRef.style.overflow 819 Chapter 30 ✦ Style Sheet and Style Objects Controls: The rendering of a block-level element’s content when its native rectangle exceeds that of its next outermost rectangular space. A hidden overflow clips the block-level content; a scrolled overflow forces the outermost rectangle to display scrollbars so that users can scroll around the block-level element’s content; a visible overflow causes the block-level element to extend beyond the outermost container’s rectangle (indeed, “overflowing” the container). Value: Constant auto | hidden | scroll | visible Example: elementRef.style.overflow = “scroll” overflowX overflowY IE/Windows IE/Mac NN W3C CSS2 Compatibility 5 —— No Controls: The rendering of a block-level element’s content when its native rectangle exceeds the width ( overflowX) or height (overflowY) of its next outermost rectangular space. A hidden overflow clips the block-level content; a scrolled overflow forces the outermost rectangle to display scrollbars so that users can scroll around the block-level element’s content; a visible overflow causes the block-level element to extend beyond the outermost container’s rectangle (indeed, “overflowing” the container). Value: Constant auto | hidden | scroll | visible Example: elementRef.style.overflowX = “scroll” styleFloat IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 — Yes Controls: Horizontal alignment of an element that allows other content to wrap around the element (usually text wrapping around an image). Corresponds to the CSS float style attribute. See also the cssFloat property, above. Floating (non- positioned) elements follow a long sequence of rules for their behavior, detailed at http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-float. Value: Constant left | right | none Example: elementRef.style.styleFloat = “right” elementRef.style.styleFloat 820 Part III ✦ Document Objects Reference verticalAlign IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: How inline and table cell content aligns vertically with surrounding content. Not all constant values are supported by all browsers. Value: Constant baseline | bottom | middle | sub | super | text-bottom | text-top | top; Length; Percentage. Example: elementRef.style.verticalAlign = “baseline” visibility IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Whether an element is displayed on the page. The element’s space is preserved as empty space when the element is hidden. To cinch up surrounding content, see the display property. This property is used frequently for hiding and showing positioned element under script control. Value: Constant collapse | hidden | visible Example: elementRef.style.visibility = “hidden” width IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Horizontal dimension of a block-level element. Earlier browsers exhibit unexpected behavior when nesting elements that have their width style properties set. Value: Length; Percentage; Constant auto Example: elementRef.style.width = “200px” elementRef.style.width 821 Chapter 30 ✦ Style Sheet and Style Objects zoom IE/Windows IE/Mac NN W3C CSS2 Compatibility 5.5 —— No Controls: Magnification factor of a rendered element. Value: Constant normal; Percentage (where 100% is normal); floating-point number (scale multiplier, where 1.0 is normal) Example: elementRef.style.zoom = “.9” Positioning properties (See Chapter 31 for coding examples of positioned elements and their style properties.) bottom right IE/Windows IE/Mac NN W3C CSS2 Compatibility 5 5 6 Yes Controls: The offset measure of a positioned element from its containing rectangle’s bottom and right edges, respectively. In practice, you should adjust the size of a positioned element via the style’s height and width properties. Value: Length; Percentage; Constant auto Example: elementRef.style.bottom = “20px” left top IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: The offset measure of a positioned element from its containing rectangle’s left and top edges, respectively. In practice, use these properties to position an element under script control. To position an absolute-positioned element atop an inline element, calculate the position of the inline element via the offsetTop and offsetLeft properties with some browser-specific adjustments, as shown in Chapter 31. elementRef.style.left 822 Part III ✦ Document Objects Reference Value: Length; Percentage; Constant auto Example: elementRef.style.top = “250px” height width IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Height and width of a block-level element’s box. Used most commonly to adjust the dimensions of a positioned element (Chapter 31). Value: Length; Percentage; Constant auto Example: elementRef.style.height = “300px” pixelBottom pixelHeight pixelLeft pixelRight pixelTop pixelWidth IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 (4) — No Controls: Integer pixel values for (primarily positioned) elements. Because the non-pixel versions of these properties return strings that also contain the unit measure (for example, 30px), these properties let you work exclusively in integers for pixel units. The same can be done cross-platform by using parseInt() on the non-pixel versions of these properties. The pixelBottom and pixelRight properties are not in IE4/Mac. Value: Integer Example: elementRef.style.pixelTop = elementRef.style.pixelTop + 20 elementRef.style.pixelBottom 823 Chapter 30 ✦ Style Sheet and Style Objects posBottom posHeight posLeft posRight posTop posWidth IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 (4) — No Controls: Numeric values for (primarily positioned) elements in whatever unit was specified by the corresponding style attribute. Because the non-pos versions of these properties return strings that also contain the unit measure (for example, 1.2em), these properties let you work exclusively in numbers in the same units as the style was originally defined. The same can be done cross-platform by using parseFloat() on the non-pixel versions of these properties. Value: Integer Example: elementRef.style.posTop = elementRef.style.posTop + 0.5 position IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: The type of positioning to be applied to the element. An element that is not explicitly positioned is said to be static. A relative-positioned element appears in its normal page flow location but can be explicitly positioned relative to that location. An absolute-positioned element must have its top and left style attributes set to give the element a set of coordinates for its location. IE5/Mac and NN6 also allow for a fixed positioned element, which remains at its designated position in the browser window, even if the page scrolls (for example, for a watermark effect). See Chapter 31 for more information on positioned elements. Value: Constant absolute | fixed | relative | static Example: elementRef.style.position = “absolute” elementRef.style.position 824 Part III ✦ Document Objects Reference zIndex IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Front-to-back layering of positioned elements. Multiple items with the same zIndex value are layered in source code order (earliest item at the bottom). The higher the value, the closer to the user’s eye the element is. Value: Integer number; Constant auto Example: elementRef.style.zIndex = “3” Background properties background IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Up to five background style properties for an element. Value: Combination values: backgroundAttachment || backgroundColor || backgroundImage || backgroundPosition || backgroundRepeat Example: elementRef.style.background = “scroll url(bricks.jpg) repeat-x” backgroundAttachment IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Whether the background image remains fixed or scrolls with the content. Default is scroll. Value: Constant fixed | scroll Example: elementRef.style.backgroundAttachment = “fixed” elementRef.style.backgroundAttachment 825 Chapter 30 ✦ Style Sheet and Style Objects backgroundColor IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Solid, opaque color for the background, or completely transparent. If you assign a background image, the color is layered behind the image so that any transparent spots of the image show the background color. Value: Color value; Constant transparent Example: elementRef.style.backgroundColor = “salmon” backgroundImage IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: The URL (if any) of an image to be used for the background for the element. Value: URL value; Constant none Example: elementRef.style.backgroundImage = “url(bricks.jpg)” backgroundPosition IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: The left-top location of the background image. Any offset from the left- top corner (default value “0% 0%”) allows background color to show through along left and top edges of the element. Value: Length values; Percentages; Constant left | center | right || top | center | bottom. While single values are accepted, their behavior may not be as expected. Providing space-delimited pairs of values is more reliable. Example: elementRef.style.backgroundPosition = “left top” elementRef.style.backgroundPosition 826 Part III ✦ Document Objects Reference backgroundPositionX backgroundPositionY IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 — No Controls: The left (backgroundPositionX) and top (backgroundPositionY) locations of the background image. Any offset from the left-top corner (default value “0%”) allows background color to show through along left and top edges of the element. Value: Length value; Percentage; Constant left | center | right (for backgroundPositionX); Constant top | center | bottom (for backgroundPositionY). Example: elementRef.style.backgroundPositionX = “5px” backgroundRepeat IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Image repetition characteristics of a background image. You can force the image to repeat along a single axis, if you want. Value: Constant repeat | repeat-x | repeat-y | no-repeat Example: elementRef.style.backgroundRepeat = “repeat-y” Border and edge properties border IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Up to three border characteristics (color, style, and width) for all four edges of an element. Value: Combination values borderColor || borderStyle || borderWidth Example: elementRef.style.border = “green groove 2px” elementRef.style.border 827 Chapter 30 ✦ Style Sheet and Style Objects borderBottom borderLeft borderRight borderTop IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes Controls: Up to three border characteristics (color, style, and width) for a single edge of an element. Value: Combination values (for borderBottom) borderBottomColor || borderBottomStyle ||borderBottomWidth (for borderLeft) borderLeftColor || borderLeftStyle || borderLeftWidth (for borderRight) borderRightColor || borderRightStyle || borderRightWidth (for borderTop) borderTopColor || borderTopStyle || borderTopWidth Example: elementRef.style.borderLeft = “#3300ff solid 2px” borderBottomColor borderLeftColor borderRightColor borderTopColor IE/Windows IE/Mac NN W3C CSS2 Compatibility 4 4 6 Yes elementRef.style.borderBottomColor . 818 Part III ✦ Document Objects Reference Controls: Distance between the edges of a marker box (content. left | right | none Example: elementRef.style.styleFloat = “right” elementRef.style.styleFloat 820 Part III ✦ Document Objects Reference verticalAlign IE/Windows IE/Mac NN W3C CSS2 Compatibility. properties with some browser-specific adjustments, as shown in Chapter 31. elementRef.style.left 822 Part III ✦ Document Objects Reference Value: Length; Percentage; Constant auto Example: elementRef.style.top