style object

[This documentation is preliminary and is subject to change.]

Represents the current settings of all possible inline styles for a given element.

Standards information

There are no standards that apply here.

Remarks

Inline styles are Cascading Style Sheets (CSS) assignments that you apply directly to individual HTML elements using the STYLE attribute. Use the style object to examine these assignments and to make new assignments or change existing ones.

To retrieve the style object, apply the style keyword to an element object. To retrieve the current setting for an inline style, apply the corresponding style property to the style object.

The style object does not provide access to the style assignments in style sheets. To obtain information about styles in style sheets, use the styleSheets collection to access to the individual style sheets defined in the document.

The following properties are not available when the rule object accesses the style object: posHeight, posWidth, posTop, posLeft, pixelHeight, pixelWidth, pixelTop, and pixelLeft.

To change or clear multiple style properties simultaneously, use this object with the cssText property. For example, to change the font color and background color of a DIV element, you could use the following code:

<DIV onclick="this.style.cssText = 'color:red;background-color:blue;border:5px solid black;'">
Click this DIV to change style properties.</DIV>

Examples

This example uses the style object to set the document body text font to Verdana.

document.body.style.fontFamily = "Verdana"

This example positions all absolutely positioned images in the given document at the top of the document.

var oImages = document.all.tags("IMG");
if (oImages.length) {
    for (var iImg = 0; iImg < oImages.length; iImg++) {
        var oImg = oImages(iImg);
        if (oImg.style.position == "absolute") {
            oImg.style.top = 0;
        }
    }
}

This example copies the inline style of the second element (div2) to the first (div1) while preserving the styles of the second. The background color of div1 is overwritten during the assignment.

<DIV ID="div1" STYLE="background-color:blue;font-weight:bold">Item 1</DIV>
<DIV ID="div2" STYLE="background-color:red;font-size:18pt;
    font-family:Verdana;">Item 2</DIV>
<SCRIPT>
div1.style.cssText += (';' + div2.style.cssText);
</SCRIPT>

Build date: 3/14/2012