Language References
Represents the cascaded format and style of the object as specified by global style sheets, inline styles, and HTML attributes.
Through the currentStyle object, cascaded style values of an object can be retrieved. Reading the currentStyle object differs from reading the style object, where style is not set inline on an 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 will return the color, whereas object.style.color will not return a value. If, however, the author specifies <P STYLE="color:'red'">, then both the currentStyle and style objects will return the value red.
The object reflects the order of style precedence in 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 will return 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 may not reflect what is currently rendering at the time a value is retrieved. For example, an object that has "color:red; display:none" will return currentStyle.color as red even though the object is not being rendered on the page. The currentStyle object, then, is not affected by the rendering constraints. The third example below 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 RGB hexadecimal equivalent to green ). Note, however, that 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 object supports user-defined properties in style rules. See the second example below.
The currentStyle object is asynchronous. This means that a style cannot be set and then immediately queried - the old value will be returned. Thus, to obtain the expected behavior of currentStyle with methods such as addImport, a script would need to include a function that called the method and a function to check the currentStyle.
To check the current style when loading a page, it is necessary to wait until the BODY is loaded and the page has been rendered, or else the value of currentStyle may not reflect what is being displayed.
currentStyle Members
In this example, the text color has been set to brown. If you click on a colored area and the background color is the same as the text color, then the checkColor function will change the background color so the text can be read. Otherwise, no action will be taken by the function.
<script language="JavaScript">
function checkColor ( oObj ) {
if ( oObj.currentStyle.backgroundColor ="brown' ) {
oObj.style.backgroundColor "white';
}
else
:
}
</script>
</head>
...
<P STYLE="background-color: 'brown'"
onclick="checkColor ( this )">
Show me
Note that this example will work only if the body and text colors are both set using either color names or RGB hexadecimal values, but not a mix of the two.
The following 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 language="JavaScript">
alert ( oPrgrph.currentStyle.myproperty )
</script>
Show me
The following 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 language="JavaScript">
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>
Show me
STYLE