In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > objects > CSSStyleDeclaration

CSSStyleDeclaration object

Browser support:

9

Represents the computed style settings for an element.

Note: The CSSStyleDeclaration object is supported in Internet Explorer from version 9.

There are four objects in JavaScript that are used to retrieve and modify style settings:

style (cross-browser)
CSSStyleDeclaration (all browsers, except Internet Explorer before version 9)
currentStyle (Internet Explorer and Opera)
runtimeStyle (Internet Explorer).

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 (all browsers, except Internet Explorer before version 9) 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.

Sometimes the retrieved style settings are in different formats than they were previously declared. For example, the CSSStyleDeclaration object retrieves RGB color values for declared predefined color names.
Another difference is that the shorthand style properties are partially supported by the CSSStyleDeclaration and currentStyle objects. For example, the border is a shorthand style property, because the color, style and width of the border can be declared with it in one place.
- The border property is supported in Opera, but not supported in Internet Explorer, Firefox, Google Chrome and Safari.
- The borderColor, borderStyle and borderWidth properties are supported in Internet Explorer and Opera, but not supported in Firefox, Google Chrome and Safari.
- The borderBottomColor, borderBottomStyle, borderBottomWidth, borderLeftColor, borderLeftStyle, borderLeftWidth, ... properties are supported in Internet Explorer, Firefox, Opera, Google Chrome and Safari as well.
- Therefore, if you need the current border settings, you must use the borderBottomColor, borderBottomStyle, borderBottomWidth, ... properties for a cross-browser solution.

"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 getPropertyValue, setProperty and removeProperty methods in all browsers except in Internet Explorer before version 9 and by the getAttribute, setExpression and removeAttribute methods in Internet Explorer (in all versions). 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:

Methods that return the object:

•	window.getComputedStyle (element, pseudoElementName)

The base interface, through which you can add new functionalities to the CSSStyleDeclaration object, is the CSSStyleDeclaration or the ComputedCSSStyleDeclaration 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.

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.

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.

cssText

Sets or retrieves the contents of a style declaration as a string.

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.

fontSizeAdjust

Specifies or returns font aspect value (font size divided by x-height).

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.

height

Specifies or returns the height of the visible area for an element.

imeMode

	3

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.

layoutGrid

Specifies or returns up to four separate layout-grid properties that specify the layout of text characters.

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.

MozAppearance

Specifies or retrieves theme rendering mode for an element. Allows you to make an element look like a standard user interface element.

MozBackgroundClip

Sets or retrieves which part of background is visible.

MozBackgroundInlinePolicy

Specifies or retrieves how the backgroundImage of an inline element is determined when the contents of the inline element wrap onto multiple lines.

MozBackgroundOrigin

Specifies or retrieves how the backgroundPosition property is determined, i.e. it defines the reference point that the backgroundImage is relative to.

MozBinding

Sets or retrieves the URL of the XBL (Extensible Binding Language) file containing the binding.

MozBorderBottomColors

Sets or retrieves the border colors for the bottom edge. You can specify as many color values as you want. All specified colors will appear as a 1px thick line.

MozBorderEnd

Specifies or returns the color, style and width properties for the end of the element's border, in a shorthand form. Use the borderLeft property instead.

MozBorderEndColor

Sets or retrieves the color of the element's border end. Use the borderLeftColor property instead.

MozBorderEndStyle

Sets or retrieves the style of the element's border end. Use the borderLeftStyle property instead.

MozBorderEndWidth

Sets or retrieves the width of the element's border end. Use the borderLeftWidth property instead.

MozBorderImage

	3.5

Specifies or retrieves an image to use as the border of the element. The image is sliced into 9 pieces along the four diagonals specified with the length units.

MozBorderLeftColors

Sets or retrieves the border colors for the left edge. You can specify as many color values as you want. All specified colors will appear as a 1px thick line.

MozBorderRadius

Sets or retrieves the rounding of the corners of the border.

MozBorderRadiusBottomleft

Sets or retrieves the rounding of the lower left corner of the border.

MozBorderRadiusBottomright

Sets or retrieves the rounding of the lower right corner of the border.

MozBorderRadiusTopleft

Sets or retrieves the rounding of the upper left corner of the border.

MozBorderRadiusTopright

Sets or retrieves the rounding of the upper right corner of the border.

MozBorderRightColors

Sets or retrieves the border colors for the right edge. You can specify as many color values as you want. All specified colors will appear as a 1px thick line.

MozBorderStart

Specifies or returns the color, style and width properties for the start of the element's border. Use the borderRight property instead.

MozBorderStartColor

Specifies or retrieves the color of the element's border start. Use the borderRightColor property instead.

MozBorderStartStyle

Specifies or retrieves the style of the element's border start. Use the borderRightStyle property instead.

MozBorderStartWidth

Specifies or retrieves the width of the element's border start. Use the borderRightWidth property instead.

MozBorderTopColors

Sets or retrieves the border colors for the top edge. You can specify as many color values as you want. All specified colors will appear as a 1px thick line.

MozBoxAlign

Specifies or retrieves how child elements of the box are aligned, when the size of the box is larger than the total size of the children.

MozBoxDirection

Specifies or retrieves the direction in which the children of a box are placed.

MozBoxFlex

Specifies or retrieves how an element grows to fill the box that contains it, relative to its siblings.

MozBoxOrdinalGroup

Sets or retrieves the display order in which objects appear within a box.

MozBoxOrient

Specifies or retrieves whether the children of a box element should be laid out horizontally or vertically.

MozBoxPack

Specifies or retrieves where child elements of the box are placed when the box is larger than the size of the children.

MozBoxShadow

	3.5

Specifies or retrieves a comma-separated list of shadow effects to be applied to the box of the element.

MozBoxSizing

Specifies or retrieves how the width and the height of the element are calculated. It affects the height and width properties.

MozColumnCount

Specifies or retrieves the number of columns that the contents of the element should be flowed into.

MozColumnGap

Specifies or retrieves the amount of space between columns.

MozColumnRule

	3.5

Specifies or retrieves the style, color and width of the column rule.

MozColumnRuleColor

	3.5

Specifies or retrieves the color of the column rule.

MozColumnRuleStyle

	3.5

Specifies or retrieves the style of the column rule, which is placed in the middle of the column gap.

MozColumnRuleWidth

	3.5

Specifies or retrieves the width of the column rule, which is placed in the middle of the column gap.

MozColumnWidth

Specifies or retrieves the suggested width of columns. The width of a column may be different from this value depending on its contents.

MozFloatEdge

Specifies or retrieves whether the height and width properties of the element include the margin, border, or padding thickness.

MozForceBrokenImageIcon

Specifies or retrieves whether the browser should display the "image failed to load" image instead of a real height.

MozMarginEnd

Specifies or retrieves the width of the left or the right margin, depends on the writing direction.

MozMarginStart

Specifies or retrieves the width of the left or the right margin, depends on the writing direction.

MozOpacity

Sets or retrieves the opacity level. For a cross-browser solution, use the opacity property in Firefox, Google Chrome, Safari and Opera, and the filter property ('filter:Alpha(opacity=50)') in Internet Explorer.

MozOutline


	3.6

Sets or retrieves the outline of the element.

MozOutlineColor


	3.6

Sets or retrieves the color of the outline.

MozOutlineOffset


	3.6

Sets or retrieves the amount of space between the outline and the border or the edge of the element.

MozOutlineRadius

Sets or retrieves the rounding of the outline corners.

MozOutlineRadiusBottomleft

Sets or retrieves the rounding of the lower left outline corner.

MozOutlineRadiusBottomright

Sets or retrieves the rounding of the lower right outline corner.

MozOutlineRadiusTopleft

Sets or retrieves the rounding of the upper left outline corner.

MozOutlineRadiusTopright

Sets or retrieves the rounding of the upper right outline corner.

MozOutlineStyle


	3.6

Sets or retrieves the style of the left, right, top, and bottom borders of the object.

MozOutlineWidth


	3.6

Sets or retrieves the width of the outline.

MozPaddingEnd

Specifies or returns the space between an element's left or right border and its contents, depending on the writing direction.

MozPaddingStart

Specifies or returns the space between an element's left or right border and its contents, depending on the writing direction.

MozTransform

Specifies or returns the two-dimensional linear transformation applied to an element. The origin of the transformation is specified by the MozTransformOrigin property.

MozTransformOrigin

Specifies or returns the origin of two-dimensional linear transformations specified with the MozTransform property.

MozUserFocus

Specifies or retrieves whether the element can have focus.

MozUserInput

Specifies or retrieves whether the element can have the input focus.

MozUserModify

Specifies or retrieves which part of the contents of an element can be modified by the user.

MozUserSelect

Specifies or retrieves whether the text of the element can be selected.

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

		9

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

	3.5	10

Specifies or returns what to do with content that exceeds the element's width.

overflowY

	3.5	10

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.

resize

Specifies or retrieves whether an element is resizable and if so, along which axis.

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

	3.5

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.

webkitAppearance

Specifies or retrieves theme rendering mode for an element. Allows you to make an element look like a standard user interface element.

webkitBackgroundClip

Sets or retrieves which part of background is visible.

webkitBackgroundComposite

Sets or retrieves the compositing style for an element's background image and color.

webkitBackgroundOrigin

Specifies or retrieves how the backgroundPosition property is determined, ergo it defines the reference point that the backgroundImage is relative to.

webkitBackgroundSize

Sets or retrieves the size of the background image.

webkitBorderBottomLeftRadius

Sets or retrieves the rounding of the lower left corner of the border.

webkitBorderBottomRightRadius

Sets or retrieves the rounding of the lower right corner of the border.

webkitBorderHorizontalSpacing

Specifies or returns the amount of horizontal space between cells in a table.

webkitBorderImage

Specifies or retrieves an image to use as the border of the element. The image is sliced into 9 pieces along the four diagonals specified with the length units.

webkitBorderRadius

Sets or retrieves the rounding of the corners of the border.

webkitBorderTopLeftRadius

Sets or retrieves the rounding of the upper left corner of the border.

webkitBorderTopRightRadius

Sets or retrieves the rounding of the upper right corner of the border.

webkitBorderVerticalSpacing

Specifies or returns the amount of vertical space between cells in a table.

webkitBoxAlign

Specifies or retrieves how child elements of the box are aligned, when the size of the box is larger than the total size of the children.

webkitBoxDirection

Specifies or retrieves the direction in which the children of a box are placed.

webkitBoxFlex

Specifies or retrieves how an element grows to fill the box that contains it, relative to its siblings.

webkitBoxFlexGroup

Specifies or retrieves the flexibility of an element group.

webkitBoxLines

Specifies or retrieves whether a flexible box should contain multiple lines of content, or not.

webkitBoxOrdinalGroup

Sets or retrieves the display order in which objects appear within a box.

webkitBoxOrient

Specifies or retrieves whether the children of a box element should be laid out horizontally or vertically.

webkitBoxPack

Specifies or retrieves where child elements of the box are placed when the box is larger than the size of the children.

webkitBoxShadow

Specifies or retrieves a comma-separated list of shadow effects to be applied to the box of the element.

webkitBoxSizing

Specifies or retrieves how the width and the height of the element are calculated. It affects the height and width properties.

webkitColumnBreakAfter

Specifies or retrieves whether a column break should occur after an element.

webkitColumnBreakBefore

Specifies or retrieves whether a column break should occur before an element.

webkitColumnBreakInside

Specifies or retrieves whether a column break should occur inside an element.

webkitColumnCount

Specifies or retrieves the number of columns that the given content of the element should be flowed into.

webkitColumnGap

Specifies or retrieves the amount of space between columns.

webkitColumnRule

Specifies or retrieves the style, color and width of the column rule.

webkitColumnRuleColor

Specifies or retrieves the color of the column rule.

webkitColumnRuleStyle

Specifies or retrieves the style of the column rule, which is placed in the middle of the column gap.

webkitColumnRuleWidth

Specifies or retrieves the width of the column rule, which is placed in the middle of the column gap.

webkitColumnWidth

Specifies or retrieves the suggected width of columns. The width of a column may be different from this value depends on its contents.

webkitLineBreak

Specifies or retrieves the line breaking rules for Chinese, Japanese and Korean text.

webkitMarginBottomCollapse

Specifies or retrieves whether the top and bottom margins can be shared between adjacent elements.

webkitMarginCollapse

Specifies or retrieves whether the top and bottom margins can be shared between adjacent elements.

webkitMarginStart

Specifies or retrieves the width of the left or the right margin, depends on the writing direction.

webkitMarginTopCollapse

Specifies or retrieves whether the top and bottom margins can be shared between adjacent elements.

webkitMarquee

Specifies or returns up to five separate marquee properties, in a shorthand form.

webkitMarqueeDirection

Specifies or retrieves the scrolling direction of the marquee.

webkitMarqueeIncrement

Specifies or retrieves the distance between each step of the scrolling marquee in pixels.

webkitMarqueeRepetition

Specifies or retrieves the number of times the marquee should repeat.

webkitMarqueeSpeed

Specifies or retrieves the speed of the scrolling mechanism in a marquee element.

webkitMarqueeStyle

Specifies or retrieves the style of scrolling in a marquee element.

webkitNbspMode

Specifies or retrieves the behavior of non-breaking spaces within an element.

webkitPaddingStart

Specifies or returns the space between an element's left or right border and its contents, depends on the writing direction.

webkitRtlOrdering

Specifies or retrieves the default rendering mode of right-to-left and mixed left-to-right content.

webkitTextFillColor

Specifies or retrieves the fill color of the text.

webkitTextSecurity

Specifies or retrieves the type of shape used to hide the letters in a password input field.

webkitTextStroke

Sets or retrieves the color and width of the text outline.

webkitTextStrokeColor

Sets or retrieves the color of text's outline.

webkitTextStrokeWidth

Sets or retrieves the width of text's outline.

webkitTransform

Specifies or returns the two-dimensional linear transformation applied to an element. The origin of the transformation is specified by the MozTransformOrigin property.

webkitTransformOrigin

Specifies or returns the origin of the two-dimensional linear transformations specified with the MozTransform property.

webkitUserDrag

Specifies or retrieves whether the element is draggable.

webkitUserModify

Specifies or retrieves which part of the content of an element can be modified by the user.

webkitUserSelect

Specifies or retrieves whether the text of the element can be selected.

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

	3.5

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

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

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>