DHTML - Current Style

 

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:

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.

Property	Description
blockDirection	Retrieves a string value that indicates whether the content in the block element flows from left to right, or from right to left.
clipBottom	Retrieves the bottom coordinate of the object clipping region.
onOffBehavior	Retrieves an object indicating 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 DHTML Behaviors.
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-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.
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	Retrieves the left coordinate of the object clipping region.
	clipRight	Retrieves the right coordinate of the object clipping region.
	clipTop	Retrieves the top coordinate of the object clipping region.
color	color	Retrieves the color of the text of the object.
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 the size of the font 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.
font-weight	fontWeight	Retrieves the weight of the font of the object.
	hasLayout	Retrieves 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 Japanese text.
line-height	lineHeight	Retrieves the distance between lines in the object.
list-style-image	listStyleImage	Retrieves which image to use as a list-item marker for the object.
list-style-position	listStylePosition	Retrieves 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.
min-height	minHeight	Retrieves the minimum height for an element.
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.
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 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.
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.

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'"
    onclick="checkColor(this)">

This feature requires Microsoft® Internet Explorer 5 or later. Click the icon below 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 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.

<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 icon below 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, 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