style

< css‎ | cssom
Jump to: navigation, search

style

This article is In Progress.


W3C Recommendation

Summary

The style attribute of an element makes it possible to directly apply CSS-styles to that specific element.

Inherits from CSSStyleDeclaration

Properties

API Name Summary
type


Methods

No methods.

Events

No events.

Inherited from CSSStyleDeclaration

Properties

API Name Summary
cssText Gets or sets the textual representation of a CSS style declaration.
item
background The background-position property sets the starting position of a background image.
clipBottom Gets the bottom coordinate of the object clipping region.
clipRight
clipTop
cssFloat
fontWeight Gets or sets the weight of the font of the object.
hasLayout
height Sets the height of an element.
width Sets the width of an element.

Methods

API Name Summary
getPropertyPriority Gets the priority of a property in a CSS style declaration.
getPropertyValue Gets the value of a property in a CSS style declaration.
removeProperty Removes a property from a CSS style declaration.
msGetPropertyEnabled Non standard. Indicates whether a property is enabled.
msPutPropertyEnabled Non standard. Sets a property as enabled or disabled.

Events

No events.


Compatibility

There is no data available for topic "webapi", feature "style". If you think that there should be data available, consider opening an issue.

Examples

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

JavaScript

document.body.style.fontFamily = "Verdana"

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

JavaScript

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.

JavaScript

<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>

Notes

Remarks

Inline styles are 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>

Standards information

There are no standards that apply here.

Members

The style object has these types of members:

  • [#methods Methods]
  • [#properties Properties]

Methods

The style object has these methods.

{

Related specifications

Specification Status Related Changes
CSS Style Attributes Recommendation

See also

Related articles

CSSOM


















































… further results

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]