style | NN n/a IE 4 DOM 1 | ||
Almost every object that reflects an
HTML element has a style object associated with it
(as you can see from the style property that
pervades the object listings in this chapter). The
style object reflects the STYLE
attribute set in the element's tag. If the element is under the
influence of a style sheet rule that is set in a
STYLE element (assigned to a selector that applies
to the current element), those style sheet values are not part of the
style object. Even if the element is under the
influence of one of these distant style sheet rules, you can still
assign a value to any style object property for
any element: the setting is likely to override (by virtue of the
cascading rules described in From a scripting point of view, it is important to know that while a style object's property exhibits a default behavior (a font size or alignment, for example), the default value may not be reflected in the property unless the value has been explicitly set in the element tag's STYLE attribute or assigned by another script statement. The Macintosh version of Internet Explorer 4 is a bit better in exposing default values, but by and large, a style object's property default value is an empty string or null. Therefore, do not expect condition testing to necessarily reveal the current value of a property unless it has been set previously. |
|||
Object Model Reference
|
background | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. | |||
Exampledocument.all.tags("DIV").style.background = "url(logo.gif) repeat-y" | |||
Value String of space-delimited values corresponding to one or more individual background style properties. | |||
|
backgroundAttachment | NN n/a IE 4 DOM n/a | ||
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. | |||
Exampledocument.all.tags("DIV").style.backgroundAttachment = "fixed" | |||
Value String of either allowable value: fixed | scroll. | |||
|
backgroundColor | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. | |||
Exampledocument.all.highlighted.style.backgroundColor = "yellow" | |||
Value Any valid color specification. |
|||
|
backgroundImage | NN n/a IE 4 DOM n/a | ||
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. | |||
Exampledocument.all.navbar.style.backgroundImage = "images/navVisited.jpg" | |||
Value Any complete or relative URL to an image file. | |||
|
backgroundPosition | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
Top and left location of the background image relative to the element's content region (plus padding). This property is not properly connected in Internet Explorer 4 for the Macintosh. | |||
Exampledocument.all.div3.style.backgroundPosition = "20 50" | |||
Value You should be able to specify one or two percentages, which are the percentages 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 (as space-delimited values inside one string). None of the allowed constants except top and left are recognized. | |||
|
backgroundPositionX, backgroundPositionY | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
Top and left locations of the background image relative to the element's content region (plus padding). These properties are not properly connected in Internet Explorer 4 for the Macintosh. | |||
Exampledocument.all.div3.style.backgroundPositionX = "20" document.all.table2.style.backgroundPositionY = "10" | |||
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. | |||
|
backgroundRepeat | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. | |||
Exampledocument.all.div3.style.backgroundRepeat = "repeat-y" | |||
Value With a 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). | |||
|
border | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. 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. | |||
Exampledocument.all.announce.style.border = "inset red 4px" | |||
Value For the borderStyle and borderWidth component values, see the respective properties in this chapter. |
|||
|
borderRight, borderTop | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
A shorthand property 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 this property to affect the display of the element's border. 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. | |||
Exampledocument.all.announce.style.borderBottom = "inset red 4px" document.all.announce.style.borderLeft = "solid #20ff00 2px" document.all.announce.style.borderRight = "double 3px" document.all.announce.style.borderTop = "outset red 8px" | |||
Value For the borderEdgeStyle and borderEdgeWidth component values, see the respective properties in this chapter. |
|||
|
borderBottomColor, borderLeftColor, borderRightColor, borderTopColor | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. |
|||
Exampledocument.all.announce.style.borderBottomColor = "red" document.all.announce.style.borderLeftColor = "#20ff00" document.all.announce.style.borderRightColor = "rgb(100, 75, 0)" document.all.announce.style.borderTopColor = "rgb(90%, 0%, 25%)" |
|||
|
borderBottomStyle, borderLeftStyle, borderRightStyle, borderTopStyle | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. | |||
Exampledocument.all.announce.style.borderBottomStyle = "groove" document.all.announce.style.borderLeftStyle = "double" document.all.announce.style.borderRightStyle = "solid" document.all.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 | |||
|
borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. | |||
Exampledocument.all.announce.style.borderBottomWidth= "thin" document.all.announce.style.borderLeftWidth = "thick" document.all.announce.style.borderRightWidth = "2px" document.all.announce.style.borderTopWidth = "0.5em" | |||
Value Three case-insensitive constants--thin | medium | thick--allow the browser to define exactly how many pixels are used to show the border. For more precision, you can also assign a length value. |
|||
|
borderColor | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
A shortcut attribute that lets you set multiple border edges to the same or different colors. For Internet Explorer, you may supply one to four space-delimited color values. The number of values determines which sides receive the assigned colors. | |||
Exampledocument.all.announce.style.borderColor = "red" document.all.announce.style.borderColor = "red green" document.all.announce.style.borderColor = "black rgb(100, 75, 0) #c0c0c0" document.all.announce.style.borderColor = "yellow green blue red" | |||
Value In Internet Explorer, this property accepts one, two, three, or four color values, depending on how many and which borders you want to set with specific colors. See the border-color attribute listing in | |||
|
borderStyle | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
A shortcut property that lets you set multiple border edges to the same or different style. For Internet Explorer, you may supply one to four space-delimited style values. The number of values determines which sides receive the assigned colors. | |||
Exampledocument.all.announce.style.borderStyle = "solid" document.all.announce.style.borderStyle = "solid double" document.all.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 | |||
|
borderWidth | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
A shortcut property that lets you set multiple border edges to the same or different width. For Internet Explorer, you may supply one to four space-delimited width length values (Navigator 4's property is read-only). The number of values determines which sides receive the assigned widths. | |||
Exampledocument.all.founderQuote.style.borderWidth = "3px 5px" | |||
Value Three case-insensitive constants--thin | medium | thick--allow the browser to define exactly how many pixels are used to show the border. For more precision, you can also assign a length value. In Internet Explorer, this property accepts one, two, three, or four width values, depending on how many and which borders you want to set with specific widths. See the border-width attribute listing in |
|||
|
clear | NN n/a IE 4 DOM n/a | ||
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 whose clear property is set to a value other than none is rendered at the beginning of the next available line below the floating element. | |||
Exampledocument.all.myDiv.style.clear = "both" | |||
Value Case-insensitive string of any of the following constants: both | left | none | right. | |||
|
clip | NN n/a IE 4 DOM n/a | ||
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. | |||
Exampledocument.all.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. 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). |
|||
|
color | NN n/a IE 4 DOM 1 | ||
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. | |||
Exampledocument.all.specialDiv.style.color = "green" | |||
Value Case-insensitive style sheet color specification. |
|||
|
cssText | NN n/a IE 4 DOM n/a | ||
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), the components for each of the four sides are spelled out (although not down to the most granular specifications). For example, if you set the STYLE attribute of an element to STYLE="border: groove red 3px", the cssText property for that element returns: BORDER-TOP: 3px groove red; BORDER-RIGHT: 3px groove red; BORDER-BOTTOM: 3px groove red; BORDER-LEFT: 3px groove red You can assign a shorthand value to the property, however. | |||
Exampledocument.all.block3.style.cssText = "margin: 2px; font-size: 14pt" | |||
Value String value of semicolon-delimited style attributes. | |||
|
cursor | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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 10-3 in 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. | |||
Exampleif (event.altKey) { event.sourceElement.style.cursor = "help" } | |||
Value Any one cursor constant as a string: auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | s-resize | se-resize | sw-resize | text | wait. | |||
|
display | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
Whether the element should be rendered in the document. Although the property can be set to a variety of values, there are only two states. When set to none, the element is hidden, and surrounding content cinches up to fill the space; when set to an empty string (or any other value), the element is displayed. | |||
Exampledocument.all.instructionDiv.style.display = "" | |||
Value Either none or an empty string (""). | |||
|
filter | NN n/a IE 4 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. As of this writing, the filter property is available in Internet Explorer 4, but does not work in the Macintosh version. | |||
Exampledocument.all.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. See the filter style sheet attribute listing in | |||
|
font | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
A shorthand property that lets you set one or more font-related properties (fontFamily, fontSize, fontVariant, and fontWeight) with one assignment statement. A space-delimited list of values (in any sequence) is applied to the specific font properties for which the value is a valid type. | |||
Exampledocument.all.subhead.style.font = "bolder small-caps 16pt" | |||
Value For syntax and examples of value types for font-related properties, see the respective property listing. | |||
|
fontFamily | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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 space-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. | |||
Exampledocument.all.subhead.style.fontFamily = "'Century Schoolbook' Times serif" | |||
Value Any number of font family names, space delimited. Multiword family names must be quoted. Recognized generic family names are: serif | sans-serif | cursive | fantasy | monospace. | |||
|
fontSize | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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 as far as a single browser in a single operating system goes, since the reference point for these sizes varies with browser and operating system. 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 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, choose a unit that makes the most sense for fonts, such as points (pt) or ems (em). The latter bases its calculation on 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. | |||
Exampledocument.all.teeny.style.fontSize = "x-small" | |||
Value Case-insensitive 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. |
|||
|
fontStyle | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. While 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." | |||
Exampledocument.all.emphasis.style.fontStyle= "italic" | |||
Value Internet Explorer 4 recognizes the following string values: normal | italic | oblique, but treats both italic and oblique as italic. | |||
|
fontVariant | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. | |||
Exampledocument.all.emphasis.style.fontVariant = "small-caps" | |||
Value Any of the following constant values as strings: normal | small-caps. | |||
|
fontWeight | NN n/a IE 4 DOM n/a | ||
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. | |||
Exampledocument.all.hotStuff.style.fontWeight = "bold" | |||
Value Any of the following constant values: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900. | |||
|
height, width | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. See pixelHeight, pixelWidth, posHeight, and posWidth properties. Changes to these properties may not be visible unless the element has its position style attribute set. | |||
Exampledocument.all.viewArea.style.height = "450px" | |||
Value String consisting of a numeric value and length measure or percentage. | |||
|
left | NN n/a IE 4 DOM n/a | ||
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, retrieve the pixelLeft or posLeft properties, which return genuine numeric values. | |||
Exampledocument.all.blockD2.style.left = "45px" | |||
Value String consisting of a numeric value and length unit measure, a percentage, or auto. | |||
|
letterSpacing | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. | |||
Exampledocument.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. | |||
|
lineHeight | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
The height of the inline box (the box holding one physical line of
content). See the line-height style attribute in
| |||
Exampledocument.all.tight.style.lineHeight = "1.1em" | |||
Value A string of a length value (with unit of measure) or normal. | |||
|
listStyle | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. | |||
Exampledocument.all.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. | |||
|
listStyleImage | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. | |||
Exampledocument.all.itemList.style.listStyleImage = "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 to an image file whose MIME type is readable by the browser. | |||
|
listStylePosition | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. | |||
Exampledocument.all.itemList.style.listStylePosition = "inside" | |||
Value Either constant value as a string: inside | outside. | |||
|
listStyleType | NN n/a IE 4 DOM n/a | ||||||||||||
Read/Write | |||||||||||||
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 square (empty on the Macintosh, filled in Windows); the other set is for OL elements, whose list items can be marked in sequences of arabic numerals, roman numerals (uppercase or lowercase), or letters of the alphabet (uppercase or lowercase). | |||||||||||||
Exampledocument.all.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 | lower-alpha | lower-roman | upper-alpha | upper-roman. OL element sequences are treated as follows:
| |||||||||||||
|
margin | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. | |||
Exampledocument.all.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 | |||
|
marginRight, marginTop | NN n/a IE 4 DOM n/a | ||
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. | |||
Exampledocument.all.logoWrapper.style.marginTop = "5px" document.all.navPanel.style.marginLeft = "10%" | |||
Value Values for margin widths can be length values, percentages of the next outermost element size, or the auto constant. | |||
|
overflow | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
How a positioned element should treat content that extends beyond the boundaries established in the style sheet rule. | |||
Exampledocument.all.myDiv.style.overflow = "scroll" | |||
Value Any of the following constants as a string: auto | hidden | scroll | visible. | |||
|
padding | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. | |||
Exampledocument.all.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 | |||
|
paddingRight, paddingTop | NN n/a IE 4 DOM n/a | ||
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. | |||
Exampledocument.all.logoWrapper.style.paddingTop = "3px" document.all.navPanel.style.paddingLeft = "10%" | |||
Value Values for padding widths can be length values, percentages of the next outermost element size, or the auto constant. | |||
|
pageBreakAfter, pageBreakBefore | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
Defines 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. | |||
Exampledocument.all.hardBR.style.pageBreakAfter = "always" document.all.navPanel.style.paddingLeft = "10%" | |||
Value Internet Explorer 4 recognizes four constant values (as strings): always | auto | left | right. | |||
|
pixelHeight, pixelWidth | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. | |||
Examplevar midWidth = document.all.myDIV.style.pixelWidth/2 | |||
Value Integer | |||
|
pixelLeft, pixelTop | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
For positionable elements, define the position of the left and top edges of an element's box (content plus left padding, border, and/or margin) relative to the left and top edges of the next outermost block content container. When the element is relative-positioned, the measure is based on the left edge 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 left and top properties, which store their values as strings with the unit names. | |||
Exampledocument.all.myDIV.style.pixelLeft++ | |||
Value Integer. | |||
|
posHeight, posWidth | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. | |||
Exampledocument.all.myDIV.style.posWidth = 10.5 | |||
Value Floating-point number. | |||
|
position | NN n/a IE 4 DOM n/a | ||
Read-only | |||
For positionable elements, returns the value assigned to the style sheet position attribute. | |||
Examplevar posType = document.all.myDIV.style.position | |||
Value Floating-point number. | |||
|
posLeft, posTop | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
For positionable elements, define the position of the left and top edges of an element's box (content plus left padding, border, and/or margin) relative to the left and top edges of the next outermost block content container. When the element is relative-positioned, the measure is based on the left edge of the inline location of 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 attribute. Use these properties for calculation (including path animation) instead of the left 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 pixelLeft and pixelTop properties, which are integer values for pixel measures only. | |||
Exampledocument.all.myDIV.style.posLeft = document.all.myDIV.style.posLeft + 1.5 | |||
Value Floating-point number. | |||
|
styleFloat | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
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. | |||
Exampledocument.all.myDIV.style.styleFloat = "right" | |||
Value One of the following constants (as a string): none | left | right. | |||
|
textAlign | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
Determines the horizontal alignment of text within an element. | |||
Exampledocument.all.myDIV.style.textAlign = "right" | |||
Value One of the three constants (as a string): center | left | right. | |||
|
textDecoration | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
Specifies additions to the text content of the element in the form of underlines, strikethroughs, overlines, and (in Navigator and CSS) blinking. You may specify more than one decoration style by supplying values in a space-delimited list. While Internet Explorer 4 accepts the blink value, it does not blink the text. Text decoration has an unusual parent-child relationship. Values are not inherited, but the effect of a decoration carries over to nested items. Therefore, unless otherwise overridden, an underlined P element underlines a nested B element within. Internet Explorer also includes properties for each decoration type. | |||
Exampledocument.all.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. | |||
|
textDecoration, textDecorationBlink, textDecorationLineThrough, textDecorationNone, textDecorationOverline, textDecorationUnderline | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
Whether the specified text decoration feature is enabled for the element. Internet Explorer does not blink text, so the textDecorationBlink property is ignored. Setting textDecorationNone to true sets all other related properties to false. Setting these properties on the Macintosh version of IE 4 does not alter the content. Use the textDecoration property instead. | |||
Exampledocument.all.emphasis.style.textDecorationLineThrough = "true" | |||
Value Boolean value: true | false. | |||
|
textIndent | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
The size of indenting of 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. | |||
Exampledocument.all.firstGraph.style.textIndent = "0.5em" | |||
Value String value consisting of a number and unit of measure. | |||
|
textTransform | NN n/a IE 4 DOM n/a | ||
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. | |||
Exampledocument.all.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. | |||
|
top | NN n/a IE 4 DOM n/a | ||
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, retrieve the pixelTop or posTop properties, which return genuine numeric values. | |||
Exampledocument.all.blockD2.style.top = "40px" | |||
Value String consisting of a numeric value and length unit measure, a percentage, or auto. | |||
|
verticalAlign | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
The vertical alignment characteristic of the element. This property operates in two spheres, depending on the selection of values you use. | |||
Exampledocument.all.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. | |||
|
visibility | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
The state of the positioned element's visibility. Surrounding content does not close up the space left by an element whose visibility property is set to hidden. | |||
Exampledocument.all.myDIV.style.visibility = "hidden" | |||
Value One of the constant values (as a string): hidden | inherit | visible. | |||
|
zIndex | NN n/a IE 4 DOM n/a | ||
Read/Write | |||
For a positioned element, the stacking order relative to other elements within the same parent container. | |||
Exampledocument.all.myDIV.style.zIndex = 3 | |||
Value Integer. | |||
|