Style handling in JavaScript
- Style objects and collections in JavaScript
- Style properties
- Properties that refer to base style objects
- Style sheets and rules
- Complex value analysis
- Box-Model
- Background properties
- Scrollbar properties
- Text and font properties
- Element specific properties
- Mouse properties
- Aural properties
- Element display properties
- Generated content properties
- Print and print preview specific properties
- Internet Explorer specific properties
- Mozilla (Firefox) specific properties
- Opera specific properties
- Safari and Google Chrome specific properties
- Style handling methods in JavaScript
Style objects and collections in JavaScript
Base style objects:
Style sheets and rules:
Objects for style values:
Additional objects:
| Object | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSSStyleDeclaration |
|
Represents the computed style settings for an element. | ||||||||||
| currentStyle | Represents the computed style settings for an element. | |||||||||||
| runtimeStyle | Represents the overridden style settings for an element. | |||||||||||
| style | Represents the inline style settings for an element or a CSS rule. | |||||||||||
| styleSheet | Represents a CSS style sheet that belongs to a style element or an imported style file. |
| Object | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSSCharsetRule | Represents a style rule or at-rule in JavaScript. | |||||||||||
| CSSFontFaceRule |
|
Represents a style rule or at-rule in JavaScript. | ||||||||||
| CSSImportRule |
|
Represents a style rule or at-rule in JavaScript. | ||||||||||
| CSSMediaRule |
|
Represents a style rule or at-rule in JavaScript. | ||||||||||
| CSSPageRule |
|
Represents a style rule or at-rule in JavaScript. | ||||||||||
| CSSRule |
|
Represents a style rule or at-rule in JavaScript. | ||||||||||
| cssRules |
|
Represents a collection of CSS rules in a styleSheet or media rule. | ||||||||||
| CSSStyleRule |
|
Represents a style rule or at-rule in JavaScript. | ||||||||||
| imports | Represents a collection of all styleSheet objects that were imported by a styleSheet object. | |||||||||||
| page | Represents a @page at-rule. | |||||||||||
| pages | Represents a collection of all @page at-rules in a styleSheet object. | |||||||||||
| rule | Represents a style rule in JavaScript. | |||||||||||
| rules | Represents a collection of style rules in a styleSheet. | |||||||||||
| styleSheet | Represents a CSS style sheet that belongs to a style element or an imported style file. | |||||||||||
| styleSheets | Represents a collection of styleSheet objects in the current document. |
| Object | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| CSSPrimitiveValue | Represents the value of a simple style property and its type. | ||||||
| CSSValue | Represents the value of a style property and its type. | ||||||
| CSSValueList | Represents the value of a complex style property and its type. | ||||||
| Counter | Represents a style value when it is a counter function. | ||||||
| Rect | Represents a style value when it is a rect function. | ||||||
| RGBColor | Represents a style value when it is color. |
| Object | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| behaviorUrns | Represents a collection of the Uniform Resource Names for all behaviors attached to an element. | |||||||||||
| filter | Represents a visual filter or transition defined by the filter style property. | |||||||||||
| filters | Represents a collection of all filter objects applied to an element. | |||||||||||
| mediaList |
|
Represents a collection of media types defined for an at-rule or a style sheet. |
Style properties
Properties that refer to base style objects:
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| currentStyle (HTMLElements, CommentNode) |
Represents the computed style settings for an element. | ||||||
| runtimeStyle (HTMLElements, CommentNode) |
Represents the overridden style settings for an element. | ||||||
| style (HTMLElements, rule objects) |
Represents the inline style settings for an element or a CSS rule. |
Style sheets and rules:
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| cssRules (CSSMediaRule, styleSheet) |
|
Represents a collection of CSS rules in a styleSheet or media rule. | ||||||||||
| disabled (styleSheet) |
Sets or retrieves a Boolean value that indicates the interaction privileges of the current styleSheet object. | |||||||||||
| href (CSSImportRule, styleSheet) |
Sets or returns the URL of a linked style sheet. | |||||||||||
| imports (styleSheet) |
Represents a collection of all styleSheet objects that were imported by a styleSheet object. | |||||||||||
| media (CSSImportRule, CSSMediaRule, styleSheet) |
|
Returns the list of media types defined for a specific style rule or a styleSheet object. | ||||||||||
| media (styleSheet, link, style) |
Specifies or returns the media types for style definition. | |||||||||||
| mediaText (mediaList) |
|
Retrieves a string that represents the media types contained by the current mediaList collection. | ||||||||||
| ownerNode (styleSheet) |
|
Returns a reference to the element that contains the current styleSheet object. | ||||||||||
| ownerRule (styleSheet) |
|
Returns a CSSRule object that represents the rule that imported the current style sheet. | ||||||||||
| owningElement (styleSheet) |
Returns a reference to the element that contains the current styleSheet object. | |||||||||||
| pages (styleSheet) |
Represents a collection of all @page at-rules in a styleSheet object. | |||||||||||
| parentRule (rule objects) |
|
Returns a reference to the CSSRule object that contains the current CSSRule object. | ||||||||||
| parentStyleSheet (rule objects, styleSheet) |
Returns the styleSheet object that contains the current CSSRule object or imports the current styleSheet object. | |||||||||||
| pseudoClass (CSSPageRule, page) |
Returns the name of the pseudo class associated with the @page at-rule. | |||||||||||
| readOnly (CSSStyleRule, rule, styleSheet) |
Returns a Boolean value that indicates whether the current style sheet or rule is imported or not. | |||||||||||
| rules (styleSheet) |
Represents a collection of style rules in a styleSheet. | |||||||||||
| selector (CSSPageRule, page) |
Returns the selector component of a @page rule as a string. | |||||||||||
| selectorText (CSSPageRule, CSSStyleRule, rule) |
Sets or retrieves a string that identifies the selector part of the current rule. | |||||||||||
| sheet (link, style) |
|
Represents a CSS style sheet that belongs to a style element or an imported style file. | ||||||||||
| styleSheet (CSSImportRule) |
|
Returns the styleSheet object that is associated with the style file included by an @import at-rule. | ||||||||||
| styleSheet (link, style) |
Represents a CSS style sheet that belongs to a style element or an imported style file. | |||||||||||
| styleSheets (document, XMLDocument) |
Represents a collection of styleSheet objects in the current document. | |||||||||||
| title (styleSheet) |
Sets or returns the title of the current styleSheet. | |||||||||||
| type (rule objects) |
|
Retrieves an integer value that identifies the type of the CSS rule represented by the current CSSRule object. | ||||||||||
| type (styleSheet) |
Retrieves a string value that identifies the language (MIME type) in which the styleSheet is written. |
Complex value analysis:
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| blue (RGBColor) |
Returns a CSSPrimitiveValue object that represents the blue component of the current RGB color. | ||||||
| bottom (Rect) |
Returns a CSSPrimitiveValue object that represents the bottom value of the current rectangle. | ||||||
| cssText (CSSRule, rule, style, ...) |
Sets or retrieves the contents of a style declaration as a string. | ||||||
| cssValueType (CSSValue, CSSValueList, ...) |
Returns the type of the style value that belongs to the current object. | ||||||
| green (RGBColor) |
Returns a CSSPrimitiveValue object that represents the green component of the current RGB color. | ||||||
| identifier (Counter) |
Returns a string that identifies the name of the counter. | ||||||
| left (Rect) |
Returns a CSSPrimitiveValue object that represents the left value of the current rectangle. | ||||||
| listStyle (Counter) |
Returns a string that identifies the list style of the counter. | ||||||
| primitiveType (CSSPrimitiveValue) |
Returns the type of the value represented by the current CSSPrimitiveValue object. | ||||||
| red (RGBColor) |
Returns a CSSPrimitiveValue object that represents the red component of the current RGB color. | ||||||
| right (Rect) |
Returns a CSSPrimitiveValue object that represents the right value of the current rectangle. | ||||||
| separator (Counter) |
Returns a string that identifies the separator of the nested counters. | ||||||
| top (Rect) |
Returns a CSSPrimitiveValue object that represents the top value of the current rectangle. |
Box-Model:
Border properties:
Margin properties:
Padding properties:
Outline properties:
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. | ||||||
| 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. | ||||||
| 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. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. |
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 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. |
Background properties:
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. |
Scrollbar properties:
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. |
Text and font properties:
Font properties:
Text properties:
Text layout:
Breaking rules:
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| color | Specifies or returns the color of the element's text content. | |||||||||||
| 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. | |||||||||||
| textDecoration | Specifies or returns the appearance characteristics of text, whether it is underlined, overlined, lined-through or blinking text. | |||||||||||
| textDecorationBlink | Sets or returns a Boolean value that indicates whether the text blink feature is enabled for the element. | |||||||||||
| textDecorationLineThrough | Sets or returns a Boolean value that indicates whether the text is displayed with a line in the middle. | |||||||||||
| textDecorationNone | Sets or returns a Boolean value that indicates whether any text decoration is allowed for the element. | |||||||||||
| textDecorationOverline | Sets or returns a Boolean value that indicates whether the element is displayed with a line at the top, or not. | |||||||||||
| textDecorationUnderline | Sets or returns a Boolean value that indicates whether the element is displayed with a line at the bottom, or not. | |||||||||||
| textShadow |
|
Specifies or returns a comma-separated list of shadow effects to be applied to the text of the element. | ||||||||||
| textUnderlinePosition | Specifies or returns the position of the underline decoration. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| direction | Specifies or returns the text direction. | ||||||
| letterSpacing | Specifies or returns the amount of space between letters. | ||||||
| lineHeight | Specifies or returns the distance between lines of text in a block-level element. | ||||||
| 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. | ||||||
| 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. | ||||||
| textTransform | Specifies or returns the case of the text. | ||||||
| unicodeBidi | Specifies or returns whether the text should be overridden to support multiple languages in the same document. Use with the direction property. | ||||||
| wordSpacing | Specifies or returns the spacing between words. | ||||||
| writingMode | Specifies or returns the intrinsic writing direction of the element's content. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. |
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| lineBreak | Specifies or returns the line-breaking rules for Chinese, Japanese or Korean text. | |||||||||||
| whiteSpace | Specifies or returns how spaces, tabs, and newline characters inside the element are handled. | |||||||||||
| wordBreak | Specifies or returns the line breaking rule within words. | |||||||||||
| wordWrap |
|
Specifies or returns whether the current line should break if the content exceeds the boundaries of its container. |
Element specific properties:
Ruby element properties:
Table element properties:
List element properties:
Input element properties:
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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). |
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| borderCollapse | Specifies or returns whether the borders of a table are joined in a single border or not. | |||||||||||
| borderSpacing |
|
Specifies or returns the space between cells in a table. | ||||||||||
| captionSide |
|
Specifies or returns the position of the caption box within a table element. | ||||||||||
| emptyCells |
|
Specifies or returns whether the border and background of empty table cells should be shown or not. | ||||||||||
| tableLayout | Specifies or returns the way to lay out table cells, rows, and columns. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. |
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 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. |
Mouse properties:
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| cursor | Specifies or returns the type of cursor to display for the pointing device (mouse). |
Aural properties:
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 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. | |||||||||||
| 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. | ||||||||||
| 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. | |||||||||||
| 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. | |||||||||||
| speak | Specifies or returns how the browser should speak the content. | |||||||||||
| voiceFamily | Specifies or returns the type of voice to use as speak control. |
Placement, dimensions and visual appearance:
Element dimension properties:
Element position properties:
Overflowing content:
Visual appearances:
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| boxSizing |
|
Specifies or retrieves how the width and the height of the element are calculated. It affects the height and width properties. | ||||||||||
| height | Specifies or returns the height of the visible area for an element. | |||||||||||
| 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. | ||||||||||
| resize | Specifies or retrieves whether an element is resizable and if so, along which axis. | |||||||||||
| width | Specifies or returns the width of the visible area for an element. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| bottom | Specifies or returns the bottom coordinate of a positioned element. | ||||||
| left | Specifies or returns the left coordinate of a positioned element. | ||||||
| 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. | ||||||
| right | Specifies or returns the right coordinate of a positioned element. | ||||||
| top | Specifies or returns the top coordinate of a positioned element. |
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 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. |
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 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 (currentStyle) |
Returns the bottom coordinate of the clipping region relative to the upper left corner of the object. | |||||||||||
| clipLeft (currentStyle) |
Returns the left coordinate of the clipping region relative to the upper left corner of the object. | |||||||||||
| clipRight (currentStyle) |
Returns the right coordinate of the clipping region relative to the upper left corner of the object. | |||||||||||
| clipTop (currentStyle) |
Returns the top coordinate of the clipping region relative to the upper left corner of the object. | |||||||||||
| cssFloat | Specifies or returns the horizontal alignment of the object. | |||||||||||
| styleFloat | Specifies or returns the horizontal alignment of the object. | |||||||||||
| display | Specifies or returns the element's display type. | |||||||||||
| filter | Specifies or returns the filter or collection of filters applied to the object. | |||||||||||
| opacity |
|
Sets or retrieves the transparency level of an element. For Internet Explorer, use filter with 'Alpha(opacity=percent)'. | ||||||||||
| verticalAlign | Specifies or returns how to align an element vertically. | |||||||||||
| visibility | Specifies or returns whether the element is visible. | |||||||||||
| zIndex | Specifies or returns the stack level of positioned objects. | |||||||||||
| zoom | Specifies or returns the zoom level of the element's content. |
Generated content properties:
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 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. | ||||||||||
| quotes |
|
Specifies or returns the pairs of quotation marks for the 'open-quote' and 'close-quote' values of the content property. |
Print and print preview specific properties:
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 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. | ||||||||||
| 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. |
Internet Explorer specific properties:
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| accelerator | Specifies or returns whether the object contains an accelerator key. | |||||||||||
| behavior | Sets or retrieves the URL of a behavior file. | |||||||||||
| behaviorUrns | Represents a collection of the Uniform Resource Names for all behaviors attached to an element. | |||||||||||
| blockDirection (currentStyle) |
Returns a string value that represents the text direction within an element. | |||||||||||
| filters (HTMLElements) |
Represents a collection of all filter objects applied to an element. | |||||||||||
| hasLayout (currentStyle) |
Returns a Boolean value that indicates whether the object has layout or not. | |||||||||||
| msInterpolationMode |
|
Sets or retrieves the interpolation algorithm for scaling an image. |
Mozilla (Firefox) specific properties:
Visual appearance:
Background:
Border:
Box:
Column:
Margin:
Outline:
Padding:
User interaction:
Additional properties:
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| MozAppearance | Specifies or retrieves theme rendering mode for an element. Allows you to make an element look like a standard user interface element. | ||||||
| MozFloatEdge | Specifies or retrieves whether the height and width properties of the element include the margin, border, or padding thickness. | ||||||
| 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. | ||||||
| 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. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. |
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 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 |
|
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. |
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 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 |
|
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. |
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 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 |
|
Specifies or retrieves the style, color and width of the column rule. | ||||||||||
| MozColumnRuleColor |
|
Specifies or retrieves the color of the column rule. | ||||||||||
| MozColumnRuleStyle |
|
Specifies or retrieves the style of the column rule, which is placed in the middle of the column gap. | ||||||||||
| MozColumnRuleWidth |
|
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. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. |
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| MozOutline |
|
Sets or retrieves the outline of the element. | ||||||||||
| MozOutlineColor |
|
Sets or retrieves the color of the outline. | ||||||||||
| MozOutlineOffset |
|
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 |
|
Sets or retrieves the style of the left, right, top, and bottom borders of the object. | ||||||||||
| MozOutlineWidth |
|
Sets or retrieves the width of the outline. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| MozBinding | Sets or retrieves the URL of the XBL (Extensible Binding Language) file containing the binding. | ||||||
| MozForceBrokenImageIcon | Specifies or retrieves whether the browser should display the "image failed to load" image instead of a real height. |
Opera specific properties:
Aural properties:
Background:
Text properties:
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. | ||||||
| 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. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| OBackgroundSize | Sets or retrieves the size of the background image. |
| Property | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| OTextOverflow |
|
Specifies or returns how to handle the overflowed area of text. |
Safari and Google Chrome specific properties:
Visual appearance:
Background:
Border:
Box:
Column:
Margin:
Marquee:
Padding:
Texts:
User interaction:
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| webkitAppearance | Specifies or retrieves theme rendering mode for an element. Allows you to make an element look like a standard user interface element. | ||||||
| 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. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| webkitPaddingStart | Specifies or returns the space between an element's left or right border and its contents, depends on the writing direction. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| webkitLineBreak | Specifies or retrieves the line breaking rules for Chinese, Japanese and Korean text. | ||||||
| webkitNbspMode | Specifies or retrieves the behavior of non-breaking spaces within an element. | ||||||
| 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. |
| Property | Support | Description | |||||
|---|---|---|---|---|---|---|---|
| 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. |
Style handling methods in JavaScript
Computed style:
| Method | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| getComputedStyle (window) |
|
Returns a CSSStyleDeclaration object that represents the computed style for the current element. |
Style sheets and rules:
| Method | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| addImport (styleSheet) |
Imports an external style file into the current styleSheet object. | |||||||||||
| addPageRule (styleSheet) |
Adds a new page rule to the current styleSheet object. | |||||||||||
| addRule (styleSheet) |
Inserts a new rule into the current styleSheet object. | |||||||||||
| appendMedium (mediaList) |
|
Adds a media type to the mediaList collection. | ||||||||||
| createStyleSheet (document) |
Creates a styleSheet object and inserts it into the current document. | |||||||||||
| deleteMedium (mediaList) |
|
Removes a media type from the mediaList collection. | ||||||||||
| deleteRule (CSSMediaRule, styleSheet) |
|
Removes a rule from the current style sheet. | ||||||||||
| insertRule (CSSMediaRule, styleSheet) |
|
Inserts a new rule into the current style sheet. | ||||||||||
| removeImport (styleSheet) |
Removes an imported style file from the imports collection of the current styleSheet object. | |||||||||||
| removeRule (styleSheet) |
Removes a rule from the current styleSheet object. |
General methods:
| Method | Support | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| addBehavior | Attaches the specified behavior to the current element. | |||||||||||
| getCounterValue (CSSPrimitiveValue) |
If the value represented by the current CSSPrimitiveValue object is a counter function, then retrieves a Counter object that represents the value. | |||||||||||
| getAttribute | Returns the value of the specified style property. | |||||||||||
| getExpression (runtimeStyle, style) |
|
Returns the dynamic expression for the specified style property. | ||||||||||
| getFloatValue (CSSPrimitiveValue) |
If the value represented by the current CSSPrimitiveValue object is a number, then retrieves the value in the specified unit type. | |||||||||||
| getPropertyCSSValue | Retrieves an object that represents the value of the specified style property. | |||||||||||
| getPropertyPriority |
|
Retrieves the priority of specified style property (the 'important' qualifier). | ||||||||||
| getPropertyValue |
|
Returns the value of the specified style property. | ||||||||||
| getRectValue (CSSPrimitiveValue) |
If the value represented by the current CSSPrimitiveValue object is a rect function, then retrieves a CSSPrimitiveValue object that represents the value. | |||||||||||
| getRGBColorValue (CSSPrimitiveValue) |
If the value represented by the current CSSPrimitiveValue object is a color, then retrieves an RGBColor object that represents the value. | |||||||||||
| getStringValue (CSSPrimitiveValue) |
If the value represented by the current CSSPrimitiveValue object is a string, then retrieves it. | |||||||||||
| removeAttribute (runtimeStyle, style) |
Removes the specified property from the current style object. | |||||||||||
| removeExpression (runtimeStyle, style) |
|
Removes the dynamic expression from the specified style property. | ||||||||||
| removeProperty |
|
Removes the specified property from the current style object. | ||||||||||
| setAttribute (runtimeStyle, style) |
Adds a property with the specified name and value to the current style object. | |||||||||||
| setExpression (runtimeStyle, style) |
|
Sets a dynamic expression for the specified style property. | ||||||||||
| setFloatValue (CSSPrimitiveValue) |
Specifies a float value for the CSSPrimitiveValue object with the specified unit type. | |||||||||||
| setProperty |
|
Adds a property with the specified name and value to the current style object. | ||||||||||
| setStringValue (CSSPrimitiveValue) |
Specifies a string value for the CSSPrimitiveValue object with the specified type. | |||||||||||
| urns (all, anchors, areas, ...) |
Returns a NodeList collection that contains all elements to which the specified behavior is attached. |
User Contributed Comments