Home | Top | Free Ajax Editor | JavaScript Editor JavaScript EditorGet Advanced
JavaScript and Ajax Editor,
Validator and Debugger!

1st JavaScript Editor.

currentStyle Object

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


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 Internet Explorer 5.

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.


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

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>
<P ID=oPrgrph> : <SCRIPT> alert(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.

<BODY ID=oBdy>
<TR><TD WIDTH=1100 ID=oTblD>text</TD></TR>
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." )

Standards Information

There is no public standard that applies to this object.

Applies To

[ Object Name ] Platform Version
Windows CE:
A , 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
Home | Top | Free Ajax Editor | JavaScript Editor JavaScript EditorGet Advanced
JavaScript and Ajax Editor,
Validator and Debugger!

1st JavaScript Editor.