currentStyle Object

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

Members Table

The following table lists the members exposed by the currentStyle object.

Attribute Property Description
background-size New for Internet Explorer 9  backgroundSize Gets the size of the background images.
blockDirection Gets a string value that indicates whether the content in the block element flows from left to right, or from right to left.
clipBottom Gets the bottom coordinate of the object clipping region.
clip-path New for Internet Explorer 9  clipPath Gets or sets a reference to the Scalable Vector Graphics (SVG) graphical object that will be used as the clipping path.
clip-rule New for Internet Explorer 9  clipRule Gets or sets a value that indicates a clipping rule.
constructor Returns a reference to the constructor of an object.
cssFloat New for Internet Explorer 9  Gets or sets a value that specifies whether a box should float to the left, right, or not at all.
length New for Internet Explorer 9  Gets the number of properties that are explicitly set on the parent object.
onOffBehavior Gets an object that indicates whether the specified Microsoft DirectAnimation behavior is running.
parentRule New for Internet Explorer 9  Gets the containing rule, if the current rule is contained inside another rule.
text-anchor New for Internet Explorer 9  textAnchor Gets or sets a value that aligns a string of text relative to a given point.
Method Description
getAttribute Retrieves the value of the specified attribute.
getExpression Retrieves the expression for the given property.
getPropertyPriority New for Internet Explorer 9  Gets the priority of a Cascading Style Sheets (CSS) property if the priority is explicitly set in the current declaration block.
getPropertyValue New for Internet Explorer 9  Gets the value of a CSS property if it is explicitly set within the current declaration block.
item New for Internet Explorer 9  Gets a property that has been explicitly set in the current declaration block.
removeProperty New for Internet Explorer 9  Removes a CSS property if it is explicitly set within the current declaration block.
setAttribute Sets the value of the specified attribute.
setExpression Sets an expression for the specified object.
setProperty New for Internet Explorer 9  Sets a property value and priority within the current declaration block.
Object Description
CSSCurrentStyleDeclaration Constructor Defines the properties and methods inherited by objects in the CSSCurrentStyleDeclaration Constructor prototype chain.
Style attribute Style property Description
-ms-accelerator accelerator Gets a string that indicates whether the object represents a keyboard shortcut.
alignment-baseline New for Internet Explorer 9  alignmentBaseline Gets or sets how an inline-level element is aligned with respect to its parent.
background New for Internet Explorer 9  background Gets or sets up to five separate background properties of the object.
background-attachment backgroundAttachment Gets how the background image is attached to the object within the document.
background-clip New for Internet Explorer 9  backgroundClip Gets the background painting area.
background-color backgroundColor Gets the color behind the content of the object.
background-image backgroundImage Gets the background image of the object.
background-origin New for Internet Explorer 9  backgroundOrigin Gets the background positioning area of a box or multiple boxes.
background-position New for Internet Explorer 9  backgroundPosition Sets or retrieves the position of the background of the object.
-ms-background-position-x backgroundPositionX Gets the x-coordinate of the backgroundPosition property.
-ms-background-position-y backgroundPositionY Gets the y-coordinate of the backgroundPosition property.
background-repeat backgroundRepeat Gets how the backgroundImage property of the object is tiled.
baseline-shift New for Internet Explorer 9  baselineShift Gets or sets a value that indicates how the dominant baseline should be repositioned relative to the dominant baseline of the parent text content element.
-ms-behavior behavior Gets the location of the Dynamic HTML (DHTML) behavior.
border New for Internet Explorer 9  border Sets or retrieves the properties to draw around the object.
border-bottom New for Internet Explorer 9  borderBottom Sets or retrieves the properties of the bottom border of the object.
border-bottom-color borderBottomColor Gets the color of the bottom border of the object.
border-bottom-left-radius New for Internet Explorer 9  borderBottomLeftRadius Gets or sets one or two values that define the radii of the quarter ellipse that defines the shape of the lower-left corner for the outer border edge of the current box.
border-bottom-right-radius New for Internet Explorer 9  borderBottomRightRadius Gets or sets one or two values that define the radii of the quarter ellipse that defines the shape of the lower-right corner for the outer border edge of the current box.
border-bottom-style borderBottomStyle Gets the style of the bottom border of the object.
border-bottom-width borderBottomWidth Gets the width of the bottom border of the object.
border-collapse borderCollapse Gets 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 Gets the border color of the object.
border-left New for Internet Explorer 9  borderLeft Sets or retrieves the properties of the left border of the object.
border-left-color borderLeftColor Gets the color of the left border of the object.
border-left-style borderLeftStyle Gets the style of the left border of the object.
border-left-width borderLeftWidth Gets the width of the left border of the object.
border-radius New for Internet Explorer 9  borderRadius Gets or sets one or more values that define the radii of a quarter ellipse that defines the shape of the corners for the outer border edge of the current box.
border-right New for Internet Explorer 9  borderRight Sets or retrieves the properties of the right border of the object.
border-right-color borderRightColor Gets the color of the right border of the object.
border-right-style borderRightStyle Gets the style of the right border of the object.
border-right-width borderRightWidth Gets the width of the right border of the object.
border-spacing borderSpacing Gets the distance between the borders of adjoining cells in a table.
border-style borderStyle Gets the style of the left, right, top, and bottom borders of the object.
border-top New for Internet Explorer 9  borderTop Sets or retrieves the properties of the top border of the object.
border-top-color borderTopColor Gets the color of the top border of the object.
border-top-left-radius New for Internet Explorer 9  borderTopLeftRadius Gets or sets one or two values that define the radii of the quarter ellipse that defines the shape of the upper-left corner for the outer border edge of the current box.
border-top-right-radius New for Internet Explorer 9  borderTopRightRadius Gets or sets one or two values that define the radii of the quarter ellipse that defines the shape of the upper-right corner for the outer border edge of the current box.
border-top-style borderTopStyle Gets the style of the top border of the object.
border-top-width borderTopWidth Gets the width of the top border of the object.
border-width borderWidth Gets the width of the left, right, top, and bottom borders of the object.
bottom bottom Gets the bottom position of the object in relation to the bottom of the next positioned object in the document hierarchy.
box-shadow New for Internet Explorer 9  boxShadow Gets or sets a comma-separated list of shadows that attaches one or more drop shadows to the current box.
box-sizing boxSizing Gets the box model to use for object sizing.
caption-side captionSide Gets where the caption of a table is located.
clear clear Gets whether the object allows floating objects on its left side, right side, or both, so that the next text displays past the floating objects.
clip New for Internet Explorer 9  clip Sets or retrieves which part of a positioned object is visible.
clipLeft Gets the left coordinate of the object clipping region.
clipRight Gets the right coordinate of the object clipping region.
clipTop Gets the top coordinate of the object clipping region.
color color Gets the color of the text of the object.
content content Gets generated content to insert before or after an element.
counter-increment counterIncrement Gets a list of counters to increment.
counter-reset counterReset Gets a list of counters to create or reset to zero.
cssText New for Internet Explorer 9  Gets or sets the persisted representation of the style rule.
cursor cursor Gets the type of cursor to display as the mouse pointer moves over the object.
direction direction Gets the reading order of the object.
display display Gets whether the object is rendered.
dominant-baseline New for Internet Explorer 9  dominantBaseline Gets or sets a value that determines or redetermines a scaled-baseline table.
empty-cells emptyCells Determines whether to show or hide a cell without content.
fill New for Internet Explorer 9  fill Gets or sets a value that indicates the color to paint the interior of the given graphical element.
fill-opacity New for Internet Explorer 9  fillOpacity Gets or sets a value that specifies the opacity of the painting operation that is used to paint the interior of the current object.
fill-rule New for Internet Explorer 9  fillRule Gets or sets a value that indicates the algorithm that is to be used to determine what parts of the canvas are included inside the shape.
-ms-filter New for Internet Explorer 9  filter Gets or sets the filter or collection of filters that are applied to the object.
font New for Internet Explorer 9  font Sets or retrieves a combination of separate font properties of the object. Alternatively, sets or retrieves one or more of six user-preference fonts.
font-family fontFamily Gets the name of the font used for text in the object.
font-size fontSize Gets a value that indicates the font size used for text in the object.
font-size-adjust New for Internet Explorer 9  fontSizeAdjust Gets or sets a value that specifies an aspect value for an element that will effectively preserve the x-height of the first choice font, whether it is substituted or not.
font-stretch New for Internet Explorer 9  fontStretch Gets or sets a value that indicates a normal, condensed, or expanded face of a font family.
font-stretch New for Internet Explorer 9  fontStretch Gets a value that indicates a normal, condensed, or expanded face of a font family.
font-style fontStyle Gets the font style of the object as italic, normal, or oblique.
font-variant fontVariant Gets whether the text of the object is in small capital letters.
fontWeight Gets the numeric weight of the font of the object.
font-weight New for Internet Explorer 9  fontWeight Gets or sets the weight of the font of the object.
glyph-orientation-horizontal New for Internet Explorer 9  glyphOrientationHorizontal Gets or sets a value that alters the orientation of a sequence of characters relative to an inline-progression-direction of horizontal.
glyph-orientation-vertical New for Internet Explorer 9  glyphOrientationVertical Gets or sets a value that alters the orientation of a sequence of characters relative to an inline-progression-direction of vertical.
hasLayout Gets a value that indicates whether the object has layout.
height height Gets the height of the object.
-ms-ime-mode imeMode Gets the state of an Input Method Editor (IME).
kerning New for Internet Explorer 9  kerning Gets or sets a value that indicates whether Internet Explorer should adjust inter-glyph spacing based on kerning tables that are included in the relevant font (that is, enable auto-kerning) or instead disable auto-kerning and set inter-character spacing to a specific length (typically zero).
-ms-layout-flow layoutFlow Gets the direction and flow of the content in the object.
-ms-layout-grid New for Internet Explorer 9  layoutGrid Sets or retrieves the composite document grid properties that specify the layout of text characters.
-ms-layout-grid-char layoutGridChar Gets the size of the character grid used for rendering the text content of an element.
-ms-layout-grid-line layoutGridLine Gets the gridline value used for rendering the text content of an element.
-ms-layout-grid-mode layoutGridMode Gets whether the text layout grid uses two dimensions.
-ms-layout-grid-type layoutGridType Gets the type of grid used for rendering the text content of an element.
left left Gets the position of the object relative to the left edge of the next positioned object in the document hierarchy.
letter-spacing letterSpacing Gets the amount of additional space between letters in the object.
line-break lineBreak Gets line-breaking rules for text in selected languages such as Japanese, Chinese, and Korean.
line-height lineHeight Gets the distance between lines in the object.
list-style New for Internet Explorer 9  listStyle Sets or retrieves up to three separate listStyle properties of the object.
list-style-image listStyleImage Gets a value that indicates which image to use as a list-item marker for the object.
list-style-position listStylePosition Gets a variable that indicates how the list-item marker is drawn relative to the content of the object.
list-style-type listStyleType Gets the predefined type of the line-item marker for the object.
margin margin Gets the width of the top, right, bottom, and left margins of the object.
margin-bottom marginBottom Gets the height of the bottom margin of the object.
margin-left marginLeft Gets the width of the left margin of the object.
margin-right marginRight Gets the width of the right margin of the object.
margin-top marginTop Gets the height of the top margin of the object.
marker New for Internet Explorer 9  marker Gets or sets a value that specifies the marker symbol that is used for all vertices on the given path element or basic shape.
marker-end New for Internet Explorer 9  markerEnd Gets or sets a value that defines the arrowhead or polymarker that is drawn at the final vertex of a given path element or basic shape.
marker-mid New for Internet Explorer 9  markerMid Gets or sets a value that defines the arrowhead or polymarker that is drawn at every other vertex (that is, every vertex except the first and last) of a given path element or basic shape.
marker-start New for Internet Explorer 9  markerStart Gets or sets a value that defines the arrowhead or polymarker that is drawn at the first vertex of a given path element or basic shape.
mask New for Internet Explorer 9  mask Gets or sets a value that indicates a SVG mask.
max-height maxHeight Gets the maximum height for an element.
max-width maxWidth Gets the maximum width for an element.
min-height minHeight Gets the minimum height for an element.
min-width minWidth Gets the minimum width for an element.
-ms-block-progression msBlockProgression Gets the block progression and layout orientation.
-ms-interpolation-mode msInterpolationMode Gets the interpolation (resampling) method used to stretch images.
opacity New for Internet Explorer 9  opacity Gets or sets a value that specifies object or group opacity in CSS or SVG.
orphans orphans Gets the minimum number of lines of a paragraph that must appear at the bottom of a page.
outline outline Gets the color, style, and width of the outline frame.
outline-color outlineColor Gets the color of the outline frame.
outline-style outlineStyle Gets the style of the outline frame.
outline-width outlineWidth Gets the width of the outline frame.
overflow overflow Gets a value indicating how to manage the content of the object when the content exceeds the height or width of the object.
-ms-overflow-x overflowX Gets how to manage the content of the object when the content exceeds the width of the object.
-ms-overflow-y overflowY Gets how to manage the content of the object when the content exceeds the height of the object.
padding padding Gets 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 Gets the amount of space to insert between the bottom border of the object and the content.
padding-left paddingLeft Gets the amount of space to insert between the left border of the object and the content.
padding-right paddingRight Gets the amount of space to insert between the right border of the object and the content.
padding-top paddingTop Gets the amount of space to insert between the top border of the object and the content.
page-break-after pageBreakAfter Gets a value indicating whether a page break occurs after the object.
page-break-before pageBreakBefore Gets a string indicating whether a page break occurs before the object.
page-break-inside pageBreakInside Gets a string indicating whether a page break is allowed to occur inside the object.
pointer-events New for Internet Explorer 9  pointerEvents Gets or sets a value that specifies under what circumstances a given graphics element can be the target element for a pointer event in SVG.
position position Gets the type of positioning used for the object.
quotes quotes Gets the pairs of strings to be used as quotes in generated content.
right right Gets the position of the object relative to the right edge of the next positioned object in the document hierarchy.
ruby-align rubyAlign Gets the position of the ruby text specified by the rt object.
ruby-overhang rubyOverhang Gets the position of the ruby text specified by the rt object.
ruby-position rubyPosition Gets the position of the ruby text specified by the rt object.
-ms-scrollbar-3dlight-color scrollbar3dLightColor Gets the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.
-ms-scrollbar-arrow-color scrollbarArrowColor Gets the color of the arrow elements of a scroll arrow.
-ms-scrollbar-base-color scrollbarBaseColor Gets the color of the main elements of a scroll bar, which include the scroll box, track, and scroll arrows.
-ms-scrollbar-darkshadow-color scrollbarDarkShadowColor Gets the color of the gutter of a scroll bar.
-ms-scrollbar-face-color scrollbarFaceColor Gets the color of the scroll box and scroll arrows of a scroll bar.
-ms-scrollbar-highlight-color scrollbarHighlightColor Gets the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.
-ms-scrollbar-shadow-color scrollbarShadowColor Gets the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.
-ms-scrollbar-track-color scrollbarTrackColor Gets the color of the track element of a scroll bar.
stop-color New for Internet Explorer 9  stopColor Gets or sets a value that indicates what color to use at the current gradient stop.
stop-opacity New for Internet Explorer 9  stopOpacity Gets or sets a value that defines the opacity of the current gradient stop.
stroke New for Internet Explorer 9  stroke Gets or sets a value that indicates the color to paint along the outline of a given graphical element.
stroke-dasharray New for Internet Explorer 9  strokeDasharray Gets or sets one or more values that indicate the pattern of dashes and gaps used to stroke paths.
stroke-dashoffset New for Internet Explorer 9  strokeDashoffset Gets or sets a value that specifies the distance into the dash pattern to start the dash.
stroke-linecap New for Internet Explorer 9  strokeLinecap Gets or sets a value that specifies the shape to be used at the end of open subpaths when they are stroked.
stroke-linejoin New for Internet Explorer 9  strokeLinejoin Gets or sets a value that specifies the shape to be used at the corners of paths or basic shapes when they are stroked.
stroke-miterlimit New for Internet Explorer 9  strokeMiterlimit Gets or sets a value that indicates the limit on the ratio of the length of miter joins (as specified in the strokeLinejoin property).
stroke-opacity New for Internet Explorer 9  strokeOpacity Gets or sets a value that specifies the opacity of the painting operation that is used to stroke the current object.
stroke-width New for Internet Explorer 9  strokeWidth Gets or sets a value that specifies the width of the stroke on the current object.
float styleFloat Gets on which side of the object the text will flow.
table-layout tableLayout Gets a string that indicates whether the table layout is fixed.
text-align textAlign Gets whether the text in the object is left-aligned, right-aligned, centered, or justified.
-ms-text-align-last textAlignLast Gets how to align the last line or only line of text in the object.
-ms-text-autospace textAutospace Gets the autospacing and narrow space width adjustment of text.
text-decoration textDecoration Gets a value that indicates whether the text in the object has blink, line-through, overline, or underline decorations.
text-indent textIndent Gets the indentation of the first line of text in the object.
-ms-text-justify textJustify Gets the type of alignment used to justify text in the object.
-ms-text-kashida-space textKashidaSpace Gets the ratio of kashida expansion to white space expansion when justifying lines of text in the object.
-ms-text-overflow textOverflow Gets a value that indicates whether to render ellipses(...) to indicate text overflow.
text-transform textTransform Gets the rendering of the text in the object.
-ms-text-underline-position textUnderlinePosition Gets the position of the underline decoration that is set through the textDecoration property of the object.
top top Gets the position of the object relative to the top of the next positioned object in the document hierarchy.
unicode-bidi unicodeBidi Gets the level of embedding with respect to the bidirectional algorithm.
vertical-align verticalAlign Gets the vertical alignment of the object.
visibility visibility Gets whether the content of the object is displayed.
white-space whiteSpace Gets a value that indicates whether lines are automatically broken inside the object.
widows widows Gets the minimum number of lines of a paragraph that must appear at the top of a page.
width width Gets the width of the object.
-ms-word-break wordBreak Gets line-breaking behavior within words, particularly where multiple languages appear in the object.
word-spacing wordSpacing Gets the amount of additional space between words in the object.
-ms-word-wrap wordWrap Gets whether to break words when the content exceeds the boundaries of its container.
-ms-writing-mode writingMode Gets the direction and flow of the content in the object.
z-index zIndex Gets the stacking order of positioned objects.
-ms-zoom zoom Gets the magnification scale of the object.

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.

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.

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

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

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>

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

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>

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

Applies To

A, ABBR, 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, Element Constructor

See Also

style