A few elements of layer styles (top, right, bottom, left, z-index, clip, visibility) are accessible in JavaScript.
The following table outlines a number of style properties. Not all work correctly in all recent browsers. There may also be interaction effects, which can mean that a property will not be reflected in the view in a particular browser unless some related property has been set to an appropriate value. For more details, see the notes.
| Property | Meaning | Possible values |
|---|---|---|
| top, right, bottom, left | box's offset | length, percentage, auto, inherit |
| z-index | stack level of box | auto, integer, inherit |
| clip | what portion of rendered content is visible | rect (top right bottom left), auto, inherit |
| visibility | whether box is rendered | visible, hidden, collapse, inherit |
| margin, margin-top, margin-right, margin-bottom, margin-left | widths of box margins | number (may be negative) |
| padding, padding-top, padding-right, padding-bottom, padding-left | widths of padding areas | number (if negative, treated as zero) |
| border, border-top, border-right, border-bottom, border-left | width, color, and style of border | thin, medium, thick, or an explicit value
transparent, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, #rgb, #rrggbb, rgb(r,g,b), rgb(r%, g%, b%) none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset |
| border-top-width, border-right-width, border-bottom-width, border-left-width, border-width | widths of the border areas | width value as for border |
| border-top-color, border-right-color, border-bottom-color, border-left-color, and border-color | colors of border areas | color value as for border |
| border-top-style, border-right-style, border-bottom-style, border-left-style, and border-style | style of border areas | style value as for border |
| display | specifies the type of box | inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table- row, table-column-group, table-column, table-cell, table-caption, none, inherit |
| position | determine which positioning algorithm is used to calculate the box's position. | static, relative, absolute, fixed, inherit (that is, normal position, offset from normal position, offset from page, offset from display area, or default) |
| width | width of box contents | length, percentage, auto, inherit |
| height | height of box contents | length, percentage, auto, inherit |
| line-height | height of text lines | normal, number, length, percentage, inherit |
| overflow | whether content is clipped when it overflows the box | visible, hidden, scroll, auto, inherit |
| color | foreground color | color, inherit |
| background-color | background color | color, transparent, inherit |
| font-family | prioritized list of family-name, generic- family, or inherit | |
| font-style | face within font family | normal, italic, oblique, inherit |
| font-variant | font variant for bicameral font | normal, small-caps, inherit |
| font-weight | weight of font | normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit |
| font-size | font size | xx-small, x-small, small, medium, large, x-large, xx- large, larger, smaller, length, percentage, inherit |
| text-indent | indentation of first line of text | length, percentage, inherit |
| text-align | how content is aligned | left, right, center, justify, inherit |
| text-decoration | decorations to add to text | none, underline, overline, line-through, blink, inherit |
| letter-spacing | spacing between text characters | normal, length, inherit |
| text-transform | capitalization | capitalize, uppercase, lowercase, none, inherit |
| white-space | how spaces and ends of lines are treated | normal, pre, nowrap, inherit |
| vertical-align | subscripts and superscripts | sub, super |
| list-style-type | how to bullet or number a list | disk, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none |
| list-style-image | graphic for bullet(s) in list or list item | url(URL) |
| list-style-position | bullet inside or outside the left margin of a list item | inside, outside |
| page-break-before | insert one or two page breaks when printing | auto, always, left, right |
| page-break-after | insert one or two page breaks when printing | auto, always, left, right |
| cursor | type of cursor to be displayed | auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, inherit |
The clip property does not seem to work correctly in older versions of Opera or in Internet Explorer.
A visibility value of "collapse" produces the same result as "visible" in Internet Explorer, but the same result as "hidden" in other browsers.
The display property is especially useful when a stylesheet is applied to an XML file, where the tags have no default formatting associated with them.
A position value of "fixed" is supposed to specify that the element does not scroll; it has this effect in other browsers, but not in Internet Explorer.
Box offset properties work if position is set to "absolute" or "relative", not "static"; and they work in all browsers for position "fixed" except Internet Explorer.
Firefox and Netscape Navigator ignore explicit values for border widths; all browsers ignore percentage values. Border widths are also ignored if no border style is specified.
If font-family specifies a font of special symbols such as "MapInfo Cartographic", results vary: Firefox and Netscape Navigator generally ignore such fonts; Opera sometimes uses the font specified and sometimes substitutes an entirely different font; only Internet Explorer generally accepts the font as given.
All common browsers treat font-style values of "italic" and "oblique" the same: if the font has italics, as italic; if it does not have italics, as oblique.
The many values of font-weight in practice all boil down to either normal ("normal", "lighter", or any number up to 500) or bold ("bold", "bolder", or any number above 500).
For font-size, Netscape Navigator and Firefox treat "large" and "larger" the same; Opera and Internet Explorer treat "larger" as smaller than "large" but larger than "normal". Opera and Internet Explorer treat "small" as larger than "smaller", while Firefox and Netscape Navigator treat them as equivalent.
If a percentage value is given for text-indent it is always treated as a proportion of the width of the text area, including any margins, but not including the borders.
Internet Explorer ignores a text-decoration value of "blink".
Internet Explorer ignores a white-space value of "pre", but does, like other browsers, correctly process "nowrap".
The list-style properties are observed only in styles applied to lists or list items; specifying them for a containing element, such as body, has no effect.
The "left" and "right" values for page breaks are used to force the next page to be an even or an odd page.
Home