currentStyle object

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

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

Standards information

There are no standards that apply here.

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 .

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 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 currentStyle.color returns 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.

Windows Internet Explorer 8 or later. The behavior of the setAttribute method and the default value of the zIndex property varies according to the current document compatibility mode. For more information, see Attribute Differences in Internet Explorer 8 and Defining Document Compatibility.

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.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/currentStyle_backgroundColor.htm

<script>
function checkColor(oObj)
{
  if (oObj.currentStyle.backgroundColor == 'brown')
	{
        oObj.style.backgroundColor = 'white';
	}
  else
	:
}
</script>
</head>
:
<p style="background-color: 'brown'"
    onclick="checkColor(this)">Click me</p>

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.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/currentStyle2.htm

<style>
    p { myproperty:myvalue }
</style>
<body>
<p ID=oPrgrph />
:
<script>
console.log(oPrgrph.currentStyle.myproperty);
</script>

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.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/currentStyle_table.htm

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

See also

style

Build date: 3/14/2012