Table of Contents | Previous | Next | Index

# Style

An object that specifies the style of HTML elements.

Client-side object |
Implemented in | JavaScript 1.2

#### Created by

Any of the following properties or methods of the `document` object:

- `document.classes`
- `document.contextual`
- `document.ids`
- `document.tags`

#### Description

The `Style` object lets you implement dynamic HTML style sheets in JavaScript. The methods and properties of the Style object implement the cascading style sheet style properties of HTML in JavaScript. For a complete description of style sheets, see Dynamic HTML in Netscape Communicator.

#### Property Summary

Property | Description
--- | ---

    align

Specifies the alignment of an HTML element within its parent.

    backgroundColor

Specifies a solid background color for an element.

    backgroundImage

Specifies a background image for an HTML element.

    borderBottomWidth

Specifies the width of the bottom border of an HTML element.

    borderColor

Specifies the color of the border of an HTML element.

    borderLeftWidth

Specifies the width of the left border of an HTML element.

    borderRightWidth

Specifies the width of the right border of an HTML element.

    borderStyle

Specifies the style of border, such as solid or double, around a block-level HTML element.

    borderTopWidth

Specifies the width of the top border of an HTML element.

    clear

Specifies the sides of an HTML element that allow floating elements.

    color

Specifies the color of the text in an HTML element.

    display

Overrides the usual display of an element and specifies whether the element appears in line, as a block-level element, or as a block-level list item.

    fontFamily

Specifies the font family, such as Helvetica or Arial, for an HTML text element.

    fontSize

Specifies the font size for an HTML text element.

    fontStyle

Specifies the style of the font of an HTML element.

    fontWeight

Specifies the weight of the font of an HTML element.

    lineHeight

Specifies the distance between the baselines of two adjacent lines of block-level type.

    listStyleType

Specifies the style of bullet displayed for list items.

    marginBottom

Specifies the minimal distance between the bottom of an HTML element and the top of an adjacent element.

    marginLeft

Specifies the minimal distance between the left side of an HTML element and the right side of an adjacent element.

    marginRight

Specifies the minimal distance between the right side of an HTML element and the left side of an adjacent element.

    marginTop

Specifies the minimal distance between the top of an HTML element and the bottom of an adjacent element.

    paddingBottom

Specifies how much space to insert between the bottom of an element and its content, such as text or an image.

    paddingLeft

Specifies how much space to insert between the left side of an element and its content, such as text or an image.

    paddingRight

Specifies how much space to insert between the right side of an element and its content, such as text or an image.

    paddingTop

Specifies how much space to insert between the top of an element and its content, such as text or an image.

    textAlign

Specifies the alignment of an HTML block-level text element.

    textDecoration

Specifies special effects, such as blinking, strike-outs, and underlines, added to an HTML text element.

    textIndent

Specifies the length of indentation appearing before the first formatted line of a block-level HTML text element.

    textTransform

Specifies the case of an HTML text element.

    whiteSpace

Specifies whether or not white space within an HTML element should be collapsed.

    width

Specifies the width of a block-level HTML element.

#### Method Summary

Method | Description
--- | ---

    borderWidths

Specifies the width of the borders of an HTML element.

    margins

Specifies the minimal distance between the sides of an HTML element and the sides of adjacent elements.

    paddings

Specifies how much space to insert between the sides of an element and its content, such as text or an image.

In addition, this object inherits the `watch` and `unwatch` methods from `Object`.

## align

Specifies the alignment of an HTML element within its parent.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.align = {left | right | none}

#### Parameters

    styleObject

A `Style` object.

Do not confuse `align` with `textAlign`, which specifies the alignment of the content of text elements. The `align` property is a reflection of the cascading style sheet `float` property.

## backgroundColor

Specifies a solid background color for an element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.backgroundColor = colorValue

#### Parameters

    styleObject

A `Style` object.

    colorValue

A string evaluating to a color value, as described in Appendix B, "Color Values."

The `backgroundColor` property is a reflection of the cascading style sheet `background-color` property.

## backgroundImage

Specifies a background image for an HTML element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.backgroundImage = url

#### Parameters

    styleObject

A `Style` object.

    url

A string evaluating to either a full URL or a partial URL relative to the source of the style sheet.

The `backgroundImage` property is a reflection of the cascading style sheet `background-image` property.

## borderBottomWidth

Specifies the width of the bottom border of an HTML element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.borderBottomWidth = length

#### Parameters

    styleObject

A `Style` object.

    length

A string evaluating to a size followed by a unit of measurement; for example, `10pt`.

The `borderBottomWidth` property is a reflection of the cascading style sheet `border-bottom-width` property.

#### See also

`Style.borderLeftWidth`, `Style.borderRightWidth`, `Style.borderTopWidth`, `Style.borderWidths`

## borderColor

Specifies the color of the border of an HTML element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.borderColor = {none | colorValue}

#### Parameters

    styleObject

A `Style` object.

    colorValue

A string evaluating to a color value, as described in Appendix B, "Color Values."

The `borderColor` property is a reflection of the cascading style sheet `border-color` property.

## borderLeftWidth

Specifies the width of the left border of an HTML element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.borderLeftWidth = length

#### Parameters

    styleObject

A `Style` object.

    length

A string evaluating to a size followed by a unit of measurement; for example, `10pt`.

The `borderLeftWidth` property is a reflection of the cascading style sheet `border-left-width` property.

#### See also

`Style.borderBottomWidth`, `Style.borderRightWidth`, `Style.borderTopWidth`, `Style.borderWidths`

## borderRightWidth

Specifies the width of the right border of an HTML element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.borderRightWidth = length

#### Parameters

    styleObject

A `Style` object.

    length

A string evaluating to a size followed by a unit of measurement; for example, `10pt`.

The `borderRightWidth` property is a reflection of the cascading style sheet `border-right-width` property.

#### See also

`Style.borderBottomWidth`, `Style.borderLeftWidth`, `Style.borderTopWidth`, `Style.borderWidths`

## borderStyle

Specifies the style of border, such as solid or double, around a block-level HTML element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.borderStyle = styleType

#### Parameters

    styleObject

A `Style` object.

    styleType

A string evaluating to any of the following keywords:

- `none`
- `solid`
- `double`
- `inset`
- `outset`
- `groove`
- `ridge`

You must also specify a border width for the border to be visible. The `borderStyle` property is a reflection of the cascading style sheet `border-style` property.

## borderTopWidth

Specifies the width of the top border of an HTML element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.borderTopWidth = length

#### Parameters

    styleObject

A `Style` object.

    length

A string evaluating to a size followed by a unit of measurement; for example, `10pt`.

The `borderTopWidth` property is a reflection of the cascading style sheet `border-top-width` property.

#### See also

`Style.borderBottomWidth`, `Style.borderLeftWidth`, `Style.borderRightWidth`, `Style.borderWidths`

## borderWidths

Specifies the width of the borders of an HTML element.

Method of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    borderWidths(top, right, bottom, left)

#### Parameters

    top

A string specifying the value of the `Style.borderTopWidth` property.

    right

A string specifying the value of the `Style.borderRightWidth` property.

    bottom

A string specifying the value of the `Style.borderBottomWidth` property.

    left

A string specifying the value of the `Style.borderLeftWidth` property.

#### Description

The `borderWidths` method is a convenience shortcut for setting all the border width properties.

#### See also

`Style.borderBottomWidth`, `Style.borderLeftWidth`, `Style.borderRightWidth`, `Style.borderTopWidth`

## clear

Specifies the sides of an HTML element that allow floating elements.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.clear = {left | right | both | none}

#### Parameters

    styleObject

A `Style` object.

The `clear` property is a reflection of the cascading style sheet `clear` property.

## color

Specifies the color of the text in an HTML element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.color = colorValue

#### Parameters

    styleObject

A `Style` object.

    colorValue

A string evaluating to a color value, as described in Appendix B, "Color Values."

The `color` property is a reflection of the cascading style `color` property.

## display

Overrides the usual display of an element and specifies whether the element appears in line, as a block-level element, or as a block-level list item.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.display = styleType

#### Parameters

    styleObject

A `Style` object.

    styleType

A string evaluating to any of the following keywords:

- `none`
- `block`
- `inline`
- `list-item`

The `display` property is a reflection of the cascading style `display` property.

## fontFamily

Specifies the font family, such as Helvetica or Arial, for an HTML text element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.fontFamily = {specificFamily | genericFamily}

#### Parameters

    styleObject

A `Style` object.

    specificFamily

A string evaluating to a comma-separated list of specific font families, such as `Helvetica` or `Arial`.

    genericFamily

A string evaluating to any of the following keywords:

- `serif`
- `sans-serif`
- `cursive`
- `monospace`
- `fantasy`

The `fontFamily` property is a reflection of the cascading style sheet `font-family` property. The genericFamily keywords are available for all platforms, but the specific font displayed varies on each platform. You can mix the specificFamily and genericFamily keywords in the same value. For example, the following code displays text in Helvetica if that font is available; otherwise, the text displays in a sans-serif font determined by the operating system:

    document.tags.H1.fontFamily = "Helvetica, sans-serif"

You can also link to a font definition file and download it when a browser loads the web page, guaranteeing that all the fonts are available on a user's system. See Dynamic HTML in Netscape Communicator.

## fontSize

Specifies the font size for an HTML text element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.fontSize =
       {absoluteSize | relativeSize | length | percentage}

#### Parameters

    styleObject

A `Style` object.

    absoluteSize

A string evaluating to any of the following keywords:

- `xx-small`
- `x-small`
- `small`
- `medium`
- `large`
- `x-large`
- `xx-large`

    relativeSize

A string evaluating to a size relative to the size of the parent element, indicated by either of the following keywords:

- `smaller`
- `larger`

    length

A string evaluating to a size followed by a unit of measurement; for example, `18pt`.

    percentage

A string evaluating to a percent of the size of the parent element; for example, `50%`.

The `fontSize` property is a reflection of the cascading style sheet `font-size` property. By default, the initial value is `medium`.

## fontStyle

Specifies the style of the font of an HTML element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.fontStyle = styleType

#### Parameters

    styleObject

A `Style` object.

    styleType

A string evaluating to either of the following keywords:

- `normal`
- `italic`

The `fontStyle` property is a reflection of the cascading style sheet `font-style` property.

## fontWeight

Specifies the weight of the font of an HTML element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.fontWeight = {absolute | relative | numeric}

#### Parameters

    styleObject

A `Style` object.

    absolute

A string evaluating to either of the following keywords:

- `normal`
- `bold`

    relative

A string evaluating to a weight relative to the weight of the parent element, indicated by either of the following keywords:

- `bolder`
- `lighter`

    numeric

A string evaluating to a numeric value between 100 and 900, where 100 indicates the lightest weight and 900 indicates the heaviest weight.

The `fontWeight` property is a reflection of the cascading style sheet `font-weight` property.

## lineHeight

Specifies the distance between the baselines of two adjacent lines of block-level type.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.lineHeight = {number | length | percentage | normal}

#### Parameters

    styleObject

A `Style` object.

    number

A string evaluating to a size without a unit of measurement; for example, `1.2`.

    length

A string evaluating to a size followed by a unit of measurement; for example, `10pt`.

    percentage

A string evaluating to a percentage of the parent element's width; for example, `20%`.

    normal

The string normal, indicating that the line height is determined automatically by Navigator.

The `lineHeight` property is a reflection of the cascading style sheet `line-height` property. When you set the `lineHeight` property by specifying `number`, Navigator calculates the line height by multiplying the font size of the current element by `number`. For example, if `lineHeight` is set to 1.2 in a paragraph using a 10-point font, the line height is 12 points. When you set `lineHeight` with `number`, children of the current paragraph inherit the line height factor; when you set `lineHeight` with `length` or `percentage`, children inherit the resulting value.

## listStyleType

Specifies the style of bullet displayed for list items.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.listStyleType = styleType

#### Parameters

    styleObject

A `Style` object.

    styleType

A string evaluating to any of the following keywords:

- `disc`
- `circle`
- `square`
- `decimal`
- `lower-roman`
- `upper-roman`
- `lower-alpha`
- `upper-alpha`
- `none`

The `listStyleType` property is a reflection of the cascading style sheet `list-style-type` property.

## marginBottom

Specifies the minimal distance between the bottom of an HTML element and the top of an adjacent element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.marginBottom = {length | percentage | auto}

#### Parameters

    styleObject

A `Style` object.

    length

A string evaluating to a size followed by a unit of measurement; for example, `10pt`.

    percentage

A string evaluating to a percentage of the parent element's width; for example, `20%`.

    auto

The string auto, indicating that the margin is determined automatically by Navigator.

The `marginBottom` property is a reflection of the cascading style sheet `margin-bottom` property.

#### See also

`Style.marginLeft`, `Style.marginRight`, `Style.marginTop`, `Style.margins`

## marginLeft

Specifies the minimal distance between the left side of an HTML element and the right side of an adjacent element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.marginLeft = {length | percentage | auto}

#### Parameters

    styleObject

A `Style` object.

    length

A string evaluating to a size followed by a unit of measurement; for example, `10pt`.

    percentage

A string evaluating to a percentage of the parent element's width; for example, `20%`.

    auto

The string auto, indicating that the margin is determined automatically by Navigator.

The `marginLeft` property is a reflection of the cascading style sheet `margin-left` property.

#### See also

`Style.marginBottom`, `Style.marginRight`, `Style.marginTop`, `Style.margins`

## marginRight

Specifies the minimal distance between the right side of an HTML element and the left side of an adjacent element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.marginRight = {length | percentage | auto}

#### Parameters

    styleObject

A `Style` object.

    length

A string evaluating to a size followed by a unit of measurement; for example, `10pt`.

    percentage

A string evaluating to a percentage of the parent element's width; for example, `20%`.

    auto

The string auto, indicating that the margin is determined automatically by Navigator.

The `marginRight` property is a reflection of the cascading style sheet `margin-right` property.

#### See also

`Style.marginBottom`, `Style.marginLeft`, `Style.marginTop`, `Style.margins`

## margins

Specifies the minimal distance between the sides of an HTML element and the sides of adjacent elements.

Method of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    margins(top, right, bottom, left)

#### Parameters

    top

A string specifying the value of the `Style.marginTop` property.

    right

A string specifying the value of the `Style.marginRight` property.

    bottom

A string specifying the value of the `Style.marginBottom` property.

    left

A string specifying the value of the `Style.marginLeft` property.

#### Description

The `margins` method is a convenience shortcut for setting all the margin properties.

#### See also

`Style.marginBottom`, `Style.marginLeft`, `Style.marginRight`, `Style.marginTop`

## marginTop

Specifies the minimal distance between the top of an HTML element and the bottom of an adjacent element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.marginTop = {length | percentage | auto}

#### Parameters

    styleObject

A `Style` object.

    length

A string evaluating to a size followed by a unit of measurement; for example, `10pt`.

    percentage

A string evaluating to a percentage of the parent element's width; for example, `20%`.

    auto

The string auto, indicating that the margin is determined automatically by Navigator.

The `marginTop` property is a reflection of the cascading style sheet `margin-top` property.

#### See also

`Style.marginBottom`, `Style.marginLeft`, `Style.marginRight`, `Style.margins`

## paddingBottom

Specifies how much space to insert between the bottom of an element and its content, such as text or an image.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.paddingBottom = {length | percentage}

#### Parameters

    styleObject

A `Style` object.

    length

A string evaluating to a size followed by a unit of measurement; for example, `10pt`.

    percentage

A string evaluating to a percentage of the parent element's width; for example, `20%`.

The `paddingBottom` property is a reflection of the cascading style sheet `padding-bottom` property.

#### See also

`Style.paddingLeft`, `Style.paddingRight`, `Style.paddingTop`, `Style.paddings`

## paddingLeft

Specifies how much space to insert between the left side of an element and its content, such as text or an image.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.paddingLeft = {length | percentage}

#### Parameters

    styleObject

A `Style` object.

    length

A string evaluating to a size followed by a unit of measurement; for example, `10pt`.

    percentage

A string evaluating to a percentage of the parent element's width; for example, `20%`.

The `paddingLeft` property is a reflection of the cascading style sheet `padding-left` property.

#### See also

`Style.paddingBottom`, `Style.paddingRight`, `Style.paddingTop`, `Style.paddings`

## paddingRight

Specifies how much space to insert between the right side of an element and its content, such as text or an image.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.paddingRight = {length | percentage}

#### Parameters

    styleObject

A `Style` object.

    length

A string evaluating to a size followed by a unit of measurement; for example, `10pt`.

    percentage

A string evaluating to a percentage of the parent element's width; for example, `20%`.

The `paddingRight` property is a reflection of the cascading style sheet `padding-right` property.

#### See also

`Style.paddingBottom`, `Style.paddingLeft`, `Style.paddingTop`, `Style.paddings`

## paddings

Specifies how much space to insert between the sides of an element and its content, such as text or an image.

Method of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    paddings(top, right, bottom, left)

#### Parameters

    top

A string specifying the value of the `Style.paddingTop` property.

    right

A string specifying the value of the `Style.paddingRight` property.

    bottom

A string specifying the value of the `Style.paddingBottom` property.

    left

A string specifying the value of the `Style.paddingLeft` property.

#### Description

The `paddings` method is a convenience shortcut for setting all the padding properties.

#### See also

`Style.paddingBottom`, `Style.paddingLeft`, `Style.paddingRight`, `Style.paddingTop`

## paddingTop

Specifies how much space to insert between the top of an element and its content, such as text or an image.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.paddingTop = {length | percentage}

#### Parameters

    styleObject

A `Style` object.

    length

A string evaluating to a size followed by a unit of measurement; for example, `10pt`.

    percentage

A string evaluating to a percentage of the parent element's width; for example, `20%`.

The `paddingTop` property is a reflection of the cascading style sheet `padding-top` property.

#### See also

`Style.paddingBottom`, `Style.paddingLeft`, `Style.paddingRight`, `Style.paddings`

## textAlign

Specifies the alignment of an HTML block-level text element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.textAlign = alignment

#### Parameters

    styleObject

A `Style` object.

    alignment

A string evaluating to any of the following keywords:

- `left`
- `right`
- `center`
- `justify`

Do not confuse `textAlign` with `align`, which specifies the alignment of an HTML element within its parent. The `textAlign` property is a reflection of the cascading style sheet `text-align` property.

## textDecoration

Specifies special effects, such as blinking, strike-outs, and underlines, added to an HTML text element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.textDecoration = decoration

#### Parameters

    styleObject

A `Style` object.

    decoration

A string evaluating to any of the following keywords:

- `none`
- `underline`
- `line-through`
- `blink`

The `textDecoration` property is a reflection of the cascading style sheet `text-decoration` property.

## textIndent

Specifies the length of indentation appearing before the first formatted line of a block-level HTML text element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.textIndent = {length | percentage}

#### Parameters

    styleObject

A `Style` object.

    length

A string evaluating to a size followed by a unit of measurement; for example, `18pt`.

    percentage

A string evaluating to a percentage of the parent element's width; for example, `20%`.

The `textIndent` property is a reflection of the cascading style sheet `text-indent` property.

## textTransform

Specifies the case of an HTML text element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.textTransform = transformation

#### Parameters

    styleObject

A `Style` object.

    transformation

A string evaluating to any of the following keywords:

- `none`
- `capitalize`
- `uppercase`
- `lowercase`

The `textTransform` property is a reflection of the cascading style sheet `text-transform` property.

## whiteSpace

Specifies whether or not white space within an HTML element should be collapsed.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.whiteSpace = {normal | pre}

#### Parameters

    styleObject

A `Style` object.

The `whiteSpace` property is a reflection of the cascading style sheet `white-space` property.

## width

Specifies the width of a block-level HTML element.

Property of | `Style`
Implemented in | JavaScript 1.2

#### Syntax

    styleObject.width = {length | percentage | auto}

#### Parameters

    styleObject

A `Style` object.

    length

A string evaluating to a size followed by a unit of measurement; for example, `10pt`.

    percentage

A string evaluating to a percentage of the parent element's width; for example, `20%`.

    auto

The string auto, indicating that the width is determined automatically by Navigator.

The `width` property is a reflection of the cascading style sheet `width` property. The `Style.marginLeft` and `Style.marginRight` properties take precedence over the `Style.width` property. For example, if `marginLeft` is set to 25%, `marginRight` is set to 10%, and `width` is set to 100%, Navigator ignores the `width` value and uses 65% for the `width` setting.

Table of Contents | Previous | Next | Index

Last Updated: 05/28/99 12:00:32

Copyright (c) 1999 Netscape Communications Corporation