Microsoft Developer Network

Represents the cascaded format and style of the object as specified by global style sheets, inline styles, and HTML attributes.

Members Table

The following table lists the members exposed by the currentStyle object.

Attributes/Properties

Show: Attributes/Properties Methods Styles

Attribute Property Description blockDirection Gets a string value that indicates whether the content in the block element flows from left to right, or from right to left. clipBottom Gets the bottom coordinate of the object clipping region. counter-increment   counterIncrement Retrieves a list of counters to increment. counter-reset   counterReset Retrieves a list of counters to create or reset to zero. -ms-box-sizing   msBoxSizing Retrieves the box model to use for object sizing. onOffBehavior Gets an object that indicates whether the specified Microsoft DirectAnimation behavior is running. Method Description getAttribute Retrieves the value of the specified attribute. getExpression Retrieves the expression for the given property. setAttribute Sets the value of the specified attribute. setExpression Sets an expression for the specified object. Style attribute Style property Description ACCELERATOR accelerator Retrieves a string that indicates whether the object contains an accelerator key. background-attachment backgroundAttachment Retrieves how the background image is attached to the object within the document. background-color backgroundColor Retrieves the color behind the content of the object. background-image backgroundImage Retrieves the background image of the object. background-position-x backgroundPositionX Retrieves the x-coordinate of the backgroundPosition property. background-position-y backgroundPositionY Retrieves the y-coordinate of the backgroundPosition property. background-repeat backgroundRepeat Retrieves how the backgroundImage property of the object is tiled. behavior behavior Retrieves the location of the Dynamic HTML (DHTML) behavior. border-bottom-color borderBottomColor Retrieves the color of the bottom border of the object. border-bottom-style borderBottomStyle Retrieves the style of the bottom border of the object. border-bottom-width borderBottomWidth Retrieves the width of the bottom border of the object. border-collapse borderCollapse Retrieves a value that indicates whether the row and cell borders of a table are joined in a single border or detached as in standard HTML. border-color borderColor Retrieves the border color of the object. border-left-color borderLeftColor Retrieves the color of the left border of the object. border-left-style borderLeftStyle Retrieves the style of the left border of the object. border-left-width borderLeftWidth Retrieves the width of the left border of the object. border-right-color borderRightColor Retrieves the color of the right border of the object. border-right-style borderRightStyle Retrieves the style of the right border of the object. border-right-width borderRightWidth Retrieves the width of the right border of the object. border-spacing   borderSpacing Retrieves the distance between the borders of adjoining cells in a table. border-style borderStyle Retrieves the style of the left, right, top, and bottom borders of the object. border-top-color borderTopColor Retrieves the color of the top border of the object. border-top-style borderTopStyle Retrieves the style of the top border of the object. border-top-width borderTopWidth Retrieves the width of the top border of the object. border-width borderWidth Retrieves the width of the left, right, top, and bottom borders of the object. bottom bottom Retrieves the bottom position of the object in relation to the bottom of the next positioned object in the document hierarchy. caption-side   captionSide Retrieves where the caption of a table is located. clear clear Retrieves whether the object allows floating objects on its left side, right side, or both, so that the next text displays past the floating objects. clipLeft Gets the left coordinate of the object clipping region. clipRight Gets the right coordinate of the object clipping region. clipTop Gets the top coordinate of the object clipping region. color color Retrieves the color of the text of the object. content   content Retrieves generated content to insert before or after an element. cursor cursor Retrieves the type of cursor to display as the mouse pointer moves over the object. direction direction Retrieves the reading order of the object. display display Retrieves whether the object is rendered. font-family fontFamily Retrieves the name of the font used for text in the object. font-size fontSize Retrieves a value that indicates the font size used for text in the object. font-style fontStyle Retrieves the font style of the object as italic, normal, or oblique. font-variant fontVariant Retrieves whether the text of the object is in small capital letters. fontWeight Gets the numeric weight of the font of the object. hasLayout Gets a value that indicates whether the object has layout. height height Retrieves the height of the object. ime-mode imeMode Retrieves the state of an Input Method Editor (IME). layout-flow layoutFlow Retrieves the direction and flow of the content in the object. layout-grid-char layoutGridChar Retrieves the size of the character grid used for rendering the text content of an element. layout-grid-line layoutGridLine Retrieves the gridline value used for rendering the text content of an element. layout-grid-mode layoutGridMode Retrieves whether the text layout grid uses two dimensions. layout-grid-type layoutGridType Retrieves the type of grid used for rendering the text content of an element. left left Retrieves the position of the object relative to the left edge of the next positioned object in the document hierarchy. letter-spacing letterSpacing Retrieves the amount of additional space between letters in the object. line-break lineBreak Retrieves line-breaking rules for text in selected languages such as Japanese, Chinese and Korean. line-height lineHeight Retrieves the distance between lines in the object. list-style-image listStyleImage Retrieves a value that indicates which image to use as a list-item marker for the object. list-style-position listStylePosition Retrieves a variable that indicates how the list-item marker is drawn relative to the content of the object. list-style-type listStyleType Retrieves the predefined type of the line-item marker for the object. margin margin Retrieves the width of the top, right, bottom, and left margins of the object. margin-bottom marginBottom Retrieves the height of the bottom margin of the object. margin-left marginLeft Retrieves the width of the left margin of the object. margin-right marginRight Retrieves the width of the right margin of the object. margin-top marginTop Retrieves the height of the top margin of the object. max-height maxHeight Retrieves the maximum height for an element. max-width maxWidth Retrieves the maximum width for an element. min-height minHeight Retrieves the minimum height for an element. min-width minWidth Retrieves the minimum width for an element. -ms-interpolation-mode msInterpolationMode Retrieves the interpolation (resampling) method used to stretch images. orphans   orphans Retrieves the minimum number of lines of a paragraph that must appear at the bottom of a page. outline   outline Retrieves the color, style, and width of the outline frame. outline-color   outlineColor Retrieves the color of the outline frame. outline-style   outlineStyle Retrieves the style of the outline frame. outline-width   outlineWidth Retrieves the width of the outline frame. overflow overflow Retrieves a value indicating how to manage the content of the object when the content exceeds the height or width of the object. overflow-x overflowX Retrieves how to manage the content of the object when the content exceeds the width of the object. overflow-y overflowY Retrieves how to manage the content of the object when the content exceeds the height of the object. padding padding Retrieves the amount of space to insert between the object and its margin or, if there is a border, between the object and its border. padding-bottom paddingBottom Retrieves the amount of space to insert between the bottom border of the object and the content. padding-left paddingLeft Retrieves the amount of space to insert between the left border of the object and the content. padding-right paddingRight Retrieves the amount of space to insert between the right border of the object and the content. padding-top paddingTop Retrieves the amount of space to insert between the top border of the object and the content. page-break-after pageBreakAfter Retrieves a value indicating whether a page break occurs after the object. page-break-before pageBreakBefore Retrieves a string indicating whether a page break occurs before the object. page-break-inside   pageBreakInside Retrieves a string indicating whether a page break is allowed to occur inside the object. position position Retrieves the type of positioning used for the object. right right Retrieves the position of the object relative to the right edge of the next positioned object in the document hierarchy. ruby-align rubyAlign Retrieves the position of the ruby text specified by the rt object. ruby-overhang rubyOverhang Retrieves the position of the ruby text specified by the rt object. ruby-position rubyPosition Retrieves the position of the ruby text specified by the rt object. scrollbar-3dlight-color scrollbar3dLightColor Retrieves the color of the top and left edges of the scroll box and scroll arrows of a scroll bar. scrollbar-arrow-color scrollbarArrowColor Retrieves the color of the arrow elements of a scroll arrow. scrollbar-base-color scrollbarBaseColor Retrieves the color of the main elements of a scroll bar, which include the scroll box, track, and scroll arrows. scrollbar-darkshadow-color scrollbarDarkShadowColor Retrieves the color of the gutter of a scroll bar. scrollbar-face-color scrollbarFaceColor Retrieves the color of the scroll box and scroll arrows of a scroll bar. scrollbar-highlight-color scrollbarHighlightColor Retrieves the color of the top and left edges of the scroll box and scroll arrows of a scroll bar. scrollbar-shadow-color scrollbarShadowColor Retrieves the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar. scrollbar-track-color scrollbarTrackColor Retrieves the color of the track element of a scroll bar. float styleFloat Retrieves on which side of the object the text will flow. table-layout tableLayout Retrieves a string that indicates whether the table layout is fixed. text-align textAlign Retrieves whether the text in the object is left-aligned, right-aligned, centered, or justified. text-align-last textAlignLast Retrieves how to align the last line or only line of text in the object. text-autospace textAutospace Retrieves the autospacing and narrow space width adjustment of text. text-decoration textDecoration Retrieves a value that indicates whether the text in the object has blink, line-through, overline, or underline decorations. text-indent textIndent Retrieves the indentation of the first line of text in the object. text-justify textJustify Retrieves the type of alignment used to justify text in the object. text-kashida-space textKashidaSpace Retrieves the ratio of kashida expansion to white space expansion when justifying lines of text in the object. text-overflow textOverflow Retrieves a value that indicates whether to render ellipses(...) to indicate text overflow. text-transform textTransform Retrieves the rendering of the text in the object. text-underline-position textUnderlinePosition Retrieves the position of the underline decoration that is set through the textDecoration property of the object. top top Retrieves the position of the object relative to the top of the next positioned object in the document hierarchy. unicode-bidi unicodeBidi Retrieves the level of embedding with respect to the bidirectional algorithm. vertical-align verticalAlign Retrieves the vertical alignment of the object. visibility visibility Retrieves whether the content of the object is displayed. white-space whiteSpace Retrieves a value that indicates whether lines are automatically broken inside the object. widows   widows Retrieves the minimum number of lines of a paragraph that must appear at the top of a page. width width Retrieves the width of the object. word-break wordBreak Retrieves line-breaking behavior within words, particularly where multiple languages appear in the object. word-spacing wordSpacing Retrieves the amount of additional space between words in the object. word-wrap wordWrap Retrieves whether to break words when the content exceeds the boundaries of its container. writing-mode writingMode Retrieves the direction and flow of the content in the object. z-index zIndex Retrieves the stacking order of positioned objects. zoom zoom Retrieves the magnification scale of the object.

Remarks

The currentStyle object returns the cascaded styles on an element, but the style object returns only the styles that have been applied inline on an element through the style attribute. Thus, the style values retrieved through the currentStyle object might differ from the style values retrieved through the style object. For example, if the color property is set on a paragraph only through a linked or embedded style sheet, and not inline, then object.currentStyle.color returns the color, whereas object.style.color does not return a value. If, however, the author specifies <P STYLE="color:'red'", the currentStyle and style objects return the value red.

The currentStyle object reflects the order of style precedence in cascading style sheets (CSS). The CSS order of precedence for the presentation of HTML is:

1. Inline styles
2. Style sheet rules
3. Attributes on HTML tags
4. Intrinsic definition of the HTML tag

Accordingly, the currentStyle object returns the fontWeight value normal on a bold tag if normal is specified in a style sheet.

The currentStyle object returns values that reflect the applied style settings for the page and might not reflect what is rendering at the time a value is retrieved. For example, an object that has "color:red; display:none" returns currentStyle.color as red even though the object is not rendered on the page. The currentStyle object, then, is not affected by the rendering constraints. The third example in the Example section demonstrates this behavior. Disabled style sheets also do not affect currentStyle values.

The returned value is in the same units as those used to set the object. For example, if the color of an object is set inline using STYLE="color:'green'", then object.currentStyle.color returns green and not #00FF00 (the red-green-blue hexadecimal equivalent to green). However, capitalization and redundant white space that appear in the object values set by the author are lost when the currentStyle object returns the object values.

The currentStyle object supports user-defined properties in style rules. See the second example in the Example section.

The currentStyle object is asynchronous. This means a style cannot be set and then immediately queried—instead, the old value is returned. Thus, for a script to obtain the expected behavior of currentStyle with methods such as addImport, the script needs to include a function that calls the method and a function that checks currentStyle. For a script to check the current style while a page is loading, the script must wait until the body element is loaded and the page has rendered, or the value of currentStyle might not reflect what is being displayed.

This object is available in script as of Microsoft Internet Explorer 5.

Examples

This example uses the currentStyle object to set the text color to brown. If you click a colored area and the background color is the same as the text color, the checkColor function changes the background color, so the text can be read. Otherwise, the function takes no action.

This example works only if the body and text colors are set using either color names or red-green-blue hexadecimal values, but not a mix of the two.

<SCRIPT>
function checkColor(oObj)
{
  if (oObj.currentStyle.backgroundColor == 'brown')
	{
        oObj.style.backgroundColor = 'white';
	}
  else
	:
}
</SCRIPT>
</HEAD>
:
<P STYLE="background-color: 'brown'"
    >

This feature requires Microsoft® Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

This example uses the currentStyle object to retrieve values of the user-defined property created in the style rule. The alert returns the value myvalue.

<STYLE>
    P { myproperty:myvalue }
</STYLE>
<BODY>
<P ID=oPrgrph>
:
<SCRIPT>
alert(oPrgrph.currentStyle.myproperty)
</SCRIPT>

This feature requires Microsoft® Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

This example shows that the td object width returned by the currentStyle object is its cascaded width value rather than the width rendered on the screen.

<BODY ID=oBdy>
:
<TABLE BORDER>
<TR><TD WIDTH=1100 ID=oTblD>text</TD></TR>
</TABLE>
:
<SCRIPT>
alert("The TD object currentStyle.width is " + oTblD.currentStyle.width +
    ".\nThe width of the window is " + oBdy.clientWidth +
    "px.\nThe width of the screen is " + screen.width + "px." )
</SCRIPT>

This feature requires Microsoft® Internet Explorer 5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

There is no public standard that applies to this object.

Applies To

A, ABBR, ACRONYM, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, hn, HTML, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, NOBR, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, WBR, XMP

See Also

style