log in | join Dottoro
search
Index Panel Syntax Highlighter Ask Dottoro Blog
search
Browse By Name
Ask Dottoro
HTMLCSSJavaScriptAppendix
You are here: Reference > JavaScript > client-side > style handling > objects > currentStyle

currentStyle object

A A Font size Print Content Add new content Share
Browser support:
Represents the computed style settings for an element.
There are four objects in JavaScript that are used to retrieve and modify style settings: These four objects are introduced in the followings.
In HTML, style settings can be specified for an element in three different ways:
  • inline style settings (with the style attribute)
  • embedded style sheets (style declarations in a style element)
  • external style sheets (style sheets imported by link elements or by import style rules)
Inline style settings have higher precedence than embedded or external style sheets, the values of inline style properties always override the values declared in embedded or external style sheets. Inline style declarations can be retrieved and modified with the style object.
If you need the current style settings of an element, the use of the style object is sometimes not enough, because it only retrieves the inline style settings. For that purpose, browsers support the CSSStyleDeclaration (Firefox, Opera and Safari) and currentStyle (Internet Explorer and Opera) objects. They retrieve the computed style for an element, regardless of whether they are defined by inline styles or embedded or external style sheets.
If no value is declared for a style property, the CSSStyleDeclaration and currentStyle objects return the default or the inherited value.
Note: The CSSStyleDeclaration and currentStyle objects are read-only, the style settings can not be modified by them.
There is an additional style object in Internet Explorer that helps working with style settings, it is the runtimeStyle object. It provides one more level over the inline style settings. It has higher precedence than the inline styles and the embedded and external style sheets.
When settings are modified by the runtimeStyle object, they have effect on the element (and so on the currentStyle object as well) but have no effect on the inline style settings. The runtimeStyle object contains only the style settings specified by itself, so it can not be used to retrieve the current style settings of an element, it can only be used to retrieve the overriden style settings.
The runtimeStyle object is useful if the style settings modified at runtime need to be restored to their original value.
Style properties can be accessed by the getAttribute, setExpression and removeAttribute methods in Internet Explorer, and by the getPropertyValue, setProperty and removeProperty methods in Firefox, Opera and Safari. Furthermore, all four mentioned style objects support properties to directly access the value of CSS properties. The names of these properties are often different from the names of the CSS properties. You can find the corresponding names on the pages for the CSS properties.

Syntax:

Properties that reference the object:
•object.currentStyle
Related objects:
Related HTML objects:
The base interface, through which you can add new functionalities to the currentStyle object, is the CSSStyleDeclaration interface.

Possible members:

 Properties
Methods
accelerator
Specifies or returns whether the object contains an accelerator key.
background
Specifies or returns up to five separate background properties, in a shorthand form.
backgroundAttachment
Specifies or returns whether the backgroundImage should scroll with the contents of the object or not.
backgroundColor
Specifies or returns the color to use for the background of the object.
backgroundImage
Specifies or returns the image to use as the background of the object.
backgroundPosition
Sets or retrieves the position of the backgroundImage within the element.
backgroundPositionX
Specifies or returns the horizontal coordinate of the backgroundImage relative to the upper-left corner of the container object.
backgroundPositionY
Specifies or returns the vertical-coordinate of the backgroundImage relative to the upper-left corner of the container object.
backgroundRepeat
Specifies or returns how to tile the backgroundImage relative to the upper-left corner of the container object.
behavior
Sets or retrieves the URL of a behavior file.
blockDirection
Returns a string value that represents the text direction within an element.
border
Sets or retrieves up to three separate border properties, in a shorthand form.
borderBottom
Sets or retrieves the color, style and width properties for the element's bottom border, in a shorthand form.
borderBottomColor
Specifies or returns the color of the element's bottom border.
borderBottomStyle
Specifies or returns the style of the element's bottom border.
borderBottomWidth
Specifies or returns the width of the element's bottom border.
borderCollapse
Specifies or returns whether the borders of a table are joined in a single border or not.
borderColor
Specifies or returns the color of the element's border.
borderLeft
Specifies or returns the color, style and width properties for the element's left border, in a shorthand form.
borderLeftColor
Specifies or returns the color of the element's left border.
borderLeftStyle
Specifies or returns the style of the element's left border.
borderLeftWidth
Specifies or returns the width of the element's left border.
borderRight
Specifies or returns the color, style and width properties for the element's right border, in a shorthand form.
borderRightColor
Specifies or returns the color of the element's right border.
borderRightStyle
Specifies or returns the style of the element's right border.
borderRightWidth
Specifies or returns the width of the element's right border.
borderSpacing
Specifies or returns the space between cells in a table.
borderStyle
Specifies or returns the style of the element's border.
borderTop
Specifies or returns the color, style and width properties for the element's top border, in a shorthand form.
borderTopColor
Specifies or returns the color of the element's top border.
borderTopStyle
Specifies or returns the style of the element's top border.
borderTopWidth
Specifies or returns the width of the element's top border.
borderWidth
Specifies or returns the width of the element's border.
bottom
Specifies or returns the bottom coordinate of a positioned element.
boxSizing
Specifies or retrieves how the width and the height of the element are calculated. It affects the height and width properties.
captionSide
Specifies or returns the position of the caption box within a table element.
clear
Specifies or returns the position of the element relative to floating objects.
clip
Specifies or returns which part of a positioned element is visible.
clipBottom
Returns the bottom coordinate of the clipping region relative to the upper left corner of the object.
clipLeft
Returns the left coordinate of the clipping region relative to the upper left corner of the object.
clipRight
Returns the right coordinate of the clipping region relative to the upper left corner of the object.
clipTop
Returns the top coordinate of the clipping region relative to the upper left corner of the object.
color
Specifies or returns the color of the element's text content.
content
Specifies or returns the generated content after or before the element.
counterIncrement
Specifies or retrieves the list of counters and increment values.
counterReset
Sets or retrieves the list of counters and their initial values.
cssFloat
Specifies or returns the horizontal alignment of the object.
cue
Retrieves the cue-before and cueAfter properties in a shorthand form in aural style sheets.
cueAfter
Retrieves the sound file to play after an element.
cueBefore
Retrieves the sound file to play before an element.
cursor
Specifies or returns the type of cursor to display for the pointing device (mouse).
direction
Specifies or returns the text direction.
display
Specifies or returns the element's display type.
emptyCells
Specifies or returns whether the border and background of empty table cells should be shown or not.
filter
Specifies or returns the filter or collection of filters applied to the object.
font
Specifies or returns up to six separate font properties, in a shorthand form.
fontFamily
Specifies or returns the font face for text.
fontSize
Specifies or returns the font size of the text.
fontStyle
Specifies or returns whether the style of the font is normal, italic or oblique.
fontVariant
Specifies or returns a variation of the specified or default fontFamily.
fontWeight
Specifies or returns the font weight of the text.
hasLayout
Returns a Boolean value that indicates whether the object has layout or not.
height
Specifies or returns the height of the visible area for an element.
imeMode
Specifies or returns the state of an Input Method Editor (IME) for user text entry fields. IME allows users to enter and edit Chinese, Japanese, and Korean characters.
layoutFlow
Specifies or returns the flow and direction of the content in an element.
layoutGridChar
Specifies or returns the size of the character grid for the layout of an element's text content.
layoutGridLine
Specifies or returns the gridline value used for laying out Japanese or Chinese characters in a web document.
layoutGridMode
Specifies or returns whether the text layout grid uses one or two dimensions.
layoutGridType
Specifies or returns the type of grid to be used for laying out Japanese or Chinese characters in a web document.
left
Specifies or returns the left coordinate of a positioned element.
length
Returns the number of properties that have been set in the current style object.
letterSpacing
Specifies or returns the amount of space between letters.
lineBreak
Specifies or returns the line-breaking rules for Chinese, Japanese or Korean text.
lineHeight
Specifies or returns the distance between lines of text in a block-level element.
listStyle
Specifies or returns up to three separate listStyle properties for an object.
listStyleImage
Specifies or returns a graphic image for a list label.
listStylePosition
Specifies or returns whether the list marker for a list item should appear inside or outside the list-item box.
listStyleType
Specifies or returns the style of the list marker bullet or numbering system within a list.
margin
Specifies or returns a shorthand property for setting the top, right, bottom and left margins, in that order.
marginBottom
Specifies or returns the bottom margin of the object.
marginLeft
Specifies or returns the left margin of the object.
marginRight
Specifies or returns the right margin of the object.
marginTop
Specifies or returns the top margin of the object.
maxHeight
Specifies or returns the maximum height for the visible area of an element.
maxWidth
Specifies or returns the maximum width for the visible area of an element.
minHeight
Specifies or returns a minimum height for the visible area of an element.
minWidth
Specifies or returns the minimum width for the visible area of an element.
msInterpolationMode
Sets or retrieves the interpolation algorithm for scaling an image.
OBackgroundSize
Sets or retrieves the size of the background image.
opacity
Sets or retrieves the transparency level of an element. For Internet Explorer, use filter with 'Alpha(opacity=percent)'.
opPhonemes
Specifies or retrieves a phonetic pronunciation for the text contained by the corresponding element.
opVoicePitch
Specifies or retrieves the average frequency of the speaking voice.
opVoicePitchRange
Specifies or retrieves the variation from the average pitch of the voice.
opVoiceRate
Specifies or returns the number of spoken words per minute.
opVoiceStress
Specifies or retrieves the strength of emphasis to be applied.
opVoiceVolume
Sets or retrieves the volume of a spoken element.
orphans
Specifies or retrieves the minimum number of lines at the start of an element's rendered content that must be visible at the bottom of a page.
OTextOverflow
Specifies or returns how to handle the overflowed area of text.
outline
Specifies or returns a shorthand form for all outline properties at once. Outline is a line around an element, but different from the border property.
outlineColor
Specifies or returns the color for the outline for an element.
outlineOffset
Sets or retrieves the amount of space between the outline and the border or the edge of the element.
outlineStyle
Specifies or returns the style for an element's outline.
outlineWidth
Specifies or returns the width for an element's outline.
overflow
Specifies or returns what to do with content outside the element's rendering area.
overflowX
Specifies or returns what to do with content that exceeds the element's width.
overflowY
Specifies or returns what to do with content that exceeds the element's height.
padding
Specifies or returns a shorthand property for setting the top, right, bottom and left spaces between an element's border and its contents, in that order.
paddingBottom
Specifies or returns the space between an element's bottom border and its contents.
paddingLeft
Specifies or returns the space between an element's left border and its contents.
paddingRight
Specifies or returns the space between an element's right border and its contents.
paddingTop
Specifies or returns the space between an element's top border and its contents.
pageBreakAfter
Specifies or returns whether a page break occurs after the object when printing.
pageBreakBefore
Specifies or returns whether a page break occurs before the object when printing.
pageBreakInside
Specifies or returns the page-breaking behavior that should occur inside an element's rendering box when printing.
pause
Specifies or returns a shorthand property for setting the pauseBefore and pauseAfter properties for speaking the element's content.
pauseAfter
Specifies or returns that the browser should insert a pause after speaking the element's content.
pauseBefore
Specifies or returns that the browser should insert a pause before speaking the element's content.
pixelBottom
Specifies or retrieves the value of the bottom style property, in pixels.
pixelHeight
Specifies or retrieves the value of the height style property, in pixels.
pixelLeft
Specifies or retrieves the value of the left style property, in pixels.
pixelRight
Specifies or retrieves the value of the right style property, in pixels.
pixelTop
Specifies or retrieves the value of the top style property, in pixels.
pixelWidth
Specifies or retrieves the value of the width style property, in pixels.
posBottom
Specifies or retrieves the value of the bottom style property as a floating-point number that specifies the value in the current unit type of the bottom property.
posHeight
Specifies or retrieves the value of the height style property as a floating-point number that specifies the value in the current unit type of the height property.
position
Specifies or returns what type of positioning method is used to render the current element.
posLeft
Specifies or retrieves the value of the left style property as a floating-point number that specifies the value in the current unit type of the left property.
posRight
Specifies or retrieves the value of the right style property as a floating-point number that specifies the value in the current unit type of the right property.
posTop
Specifies or retrieves the value of the top style property as a floating-point number that specifies the value in the current unit type of the top property.
posWidth
Specifies or retrieves the value of the width style property as a floating-point number that specifies the value in the current unit type of the width property.
quotes
Specifies or returns the pairs of quotation marks for the 'open-quote' and 'close-quote' values of the content property.
rest
Specifies or returns a shorthand property for setting the restBefore and restAfter properties for speaking the element's content.
restAfter
Specifies or returns that the browser should insert a rest after speaking the element's content.
restBefore
Specifies or returns that the browser should insert a rest before speaking the element's content.
right
Specifies or returns the right coordinate of a positioned element.
rubyAlign
Specifies or returns the horizontal alignment of the Ruby text defined by the rt tag, relative to the base text defined by the ruby tag.
rubyOverhang
Specifies or returns the Ruby text position, relative to the base text defined by the ruby tag.
rubyPosition
Specifies or returns the position of the Ruby text (rt).
scrollbar3dLightColor
Specifies or returns the color of the outer top and left bevel edges of the scroll box and scroll arrows of the scroll bar.
scrollbarArrowColor
Specifies or returns the color of the arrow of the scroll bar.
scrollbarBaseColor
Specifies or returns the main color of the scroll bar.
scrollbarDarkShadowColor
Specifies or returns the color of the outer bottom and right bevel edges of the scroll box and scroll arrows of the scroll bar.
scrollbarFaceColor
Specifies or returns the color for the face of the scroll bar.
scrollbarHighlightColor
Specifies or returns the color of the top and left edges of the scroll bar.
scrollbarShadowColor
Specifies or returns the color of the bottom and right edges of the scroll bar.
scrollbarTrackColor
Specifies or returns the color of the scroll bar's track element.
speak
Specifies or returns how the browser should speak the content.
styleFloat
Specifies or returns the horizontal alignment of the object.
tableLayout
Specifies or returns the way to lay out table cells, rows, and columns.
textAlign
Specifies or returns the horizontal alignment of the text within the element.
textAlignLast
Specifies or returns the alignment type of the last or only line of text in the element's contents.
textAutospace
Specifies or returns the spacing rules between Western and Asian-based (such as Japanese and Chinese) characters.
textDecoration
Specifies or returns the appearance characteristics of text, whether it is underlined, overlined, lined-through or blinking text.
textIndent
Specifies or returns the horizontal indent for the first line of text.
textJustify
Specifies or returns how justified text should be aligned and spaced.
textKashidaSpace
Specifies or returns how to justify lines of text by elongating characters at algorithmically-selected points in Arabic writing systems.
textOverflow
Specifies or returns how to handle the overflowed area of text.
textShadow
Specifies or returns a comma-separated list of shadow effects to be applied to the text of the element.
textTransform
Specifies or returns the case of the text.
textUnderlinePosition
Specifies or returns the position of the underline decoration.
top
Specifies or returns the top coordinate of a positioned element.
unicodeBidi
Specifies or returns whether the text should be overridden to support multiple languages in the same document. Use with the direction property.
verticalAlign
Specifies or returns how to align an element vertically.
visibility
Specifies or returns whether the element is visible.
voiceFamily
Specifies or returns the type of voice to use as speak control.
whiteSpace
Specifies or returns how spaces, tabs, and newline characters inside the element are handled.
widows
Specifies or retrieves the minimum number of lines at the end of an element's rendered content that must be visible at the top of a page.
width
Specifies or returns the width of the visible area for an element.
wordBreak
Specifies or returns the line breaking rule within words.
wordSpacing
Specifies or returns the spacing between words.
wordWrap
Specifies or returns whether the current line should break if the content exceeds the boundaries of its container.
writingMode
Specifies or returns the intrinsic writing direction of the element's content.
XvInterpretAs
Specifies or retrieves how to interpret the contents of the corresponding element.
XvPhonemes
Specifies or retrieves a phonetic pronunciation for the text contained by the corresponding element.
XvVoiceBalance
Sets or retrieves the balance between left and right channels.
XvVoiceDuration
Specifies or retrieves how long a given element is to be rendered.
XvVoicePitch
Specifies or retrieves the average frequency of the speaking voice.
XvVoicePitchRange
Specifies or retrieves the variation from the average pitch of the voice.
XvVoiceRate
Specifies or returns the number of spoken words per minute.
XvVoiceStress
Specifies or retrieves the strength of emphasis to be applied.
XvVoiceVolume
Sets or retrieves the volume of a spoken element.
zIndex
Specifies or returns the stack level of positioned objects.
zoom
Specifies or returns the zoom level of the element's content.

Example HTML code 1:

This example uses the style object to retrieve the background color of an element when it is specified by an inline style:
 
<head>
    <script type="text/javascript">
        function GetBGColor (button) {
            alert (button.style.backgroundColor);
        }
    </script> 
</head>
<body>
    <button onclick="GetBGColor (this)" style="background-color:red">Get my background color!</button>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 2:

This example uses the CSSStyleDeclaration and currentStyle objects to retrieve the background color of an element when it is specified by an inline style:
 
<head>
    <script type="text/javascript">
        function GetBGColor (button) {
            if (window.getComputedStyle) {
                var compStyle = window.getComputedStyle (button, "");
            }
            else {
                var compStyle = button.currentStyle;
            }
            alert (compStyle.backgroundColor);
        }
    </script> 
</head>
<body>
    <button onclick="GetBGColor (this)" style="background-color:red">Get my background color!</button>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 3:

This example uses the CSSStyleDeclaration and currentStyle objects to retrieve the background color of an element when it is specified by an embedded style:
 
<head>
    <style>
        .myButton {
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        function GetBGColor (button) {
            if (window.getComputedStyle) {
                var compStyle = window.getComputedStyle (button, "");
            }
            else {
                var compStyle = button.currentStyle;
            }
            alert (compStyle.backgroundColor);
        }
    </script> 
</head>
<body>
    <button onclick="GetBGColor (this)" class="myButton">Get my background color!</button>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Related pages:

style
runtimeStyle
CSSStyleDeclaration

External links:

currentStyle (MSDN)
currentStyle (Mozilla Developer Center)
User Contributed Comments

Post Content

Post Content
Search: search
Copyright© Dottoro.com All rights reserved.