currentStyle Object

DHTML, HTML, & CSS

previous page next page

COMMENT Element | COMMENT...

custom Element | custom O...

DHTML Objects

Web Workshop | DHTML, HTML & CSS

currentStyle Object

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

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:

Inline styles
Style sheet rules
Attributes on HTML tags
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.

Members

currentStyle Members

Example

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.

Sample Code
<SCRIPT>
function checkColor(oObj)
{
  if (oObj.currentStyle.backgroundColor == 'brown')
	{
        oObj.style.backgroundColor = 'white';
	}
  else
	:
}
</SCRIPT>
</HEAD>
:
<P STYLE="background-color: 'brown'"
    onclick="checkColor(this)">
This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

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

Sample Code
<STYLE>
    P { myproperty:myvalue }
</STYLE>
<BODY>
<P ID=oPrgrph>
:
<SCRIPT>
alert(oPrgrph.currentStyle.myproperty)
</SCRIPT>
This feature requires Internet Explorer 5 or later. Click the icon below 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.

Sample Code
<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 Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

Applies To

[ Object Name ]

Platform Version

Win16:

Win32:

Mac:

Unix:

WinCE:

Version data is listed when the mouse hovers over a link, or the link has focus.

A, ACRONYM, ADDRESS, APPLET, AREA, B, BASE, BASEFONT, BDO, BGSOUND, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, COMMENT, custom, DD, DEL, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, HEAD, 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, LINK, LISTING, MAP, MARQUEE, MENU, META, NEXTID, NOBR, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, STYLE, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, U, UL, VAR, WBR, XMP