Contact Enhanced Documentation

JavaScript Style Attributes

Listed below are the tables of CSS properties for various HTML element style attributes. I have added a column indicating the javaScript name that the browser recognizes for these properties. I have only listed those that I know work, but the trend seems to be to use the same name when one name is the style descriptor. When there are two names, use the first name in lower case and the first character of the second name in upper case. Examples:

  • color = color
  • background-color = backgroundColor
  • font-style = fontStyle
  • font-weight = fontWeight

Box Properties

NameJavaScript NameDescriptionPossible ValuesElement TypesExampleinherited
border Sets border width, style and color. See border width, style, and color All {border: medium solid green} No
border-bottom Set the bottom border width style, and color. See border width, style, and color All {border-bottom: medium solid green} No
border-bottom-width Set the bottom border width thin, medium, thick, or length value All {border-bottom-width: thin} No
border-color Set the border color A color value, color, #RRGGBB All {border: #0000ff} No
border-left Set the left border width style, and color. See border width, style, and color All {border-left: medium solid green} No
border-left-width Set the left border width thin, medium, thick, or length value All {border-left-width: thin} No
border-right Set the right border width style, and color. See border width, style, and color All {border-right: medium solid green} No
border-right-width Set the right border width thin, medium, thick, or length value All {border-right-width: thin} No
border-style Sets border style none, dotted, dashed, solid, double, groove, ridge, inset, outset All {border: dashed} No
border-top Set the top border width style, and color. See border width, style, and color All {border-top: medium solid green} No
border-top-width Set the top border width thin, medium, thick, or length value All {border-top-width: thin} No
border-width Sets Border width. thin, medium, thick, or length value All {border-width: 8} No
clear Determines where floating elements are allowed. none, left, right, both All {clear: left} No
float Specifies how text is wrapped and where it is aligned. none, left, right All {float: left} No
height Height of element auto or a height value Block elements and IMG, INPUT, TEXTAREA, SELECT, and OBJECT {height: 200} No
margin Set element margin width. A single value sets all margins, two values set top and bottom, four values set top, right, bottom, and left margins. auto, length value, or percent value All {margin: 4em 2em 4em 2em} No
margin-bottom marginBottom Set element bottom margin length value, or percent value All {margin-bottom: 4em} No
margin-left marginLeft Set element left margin length value, or percent value All {margin-left: 4em} No
margin-right marginRight Set element right margin length value, or percent value All {margin-right: 4em} No
margin-top marginTop Set element top margin length value, or percent value All {margin-top: 4em} No
padding Space between border and content. A single value sets all sides, two values set top/bottom and left/right, three values set top, right/left, and bottom, and four values set top, right, bottom, and left. length value, or percent value All {padding: 4em} No
padding-bottom Space between bottom border and content. length value, or percent value All {padding-bottom: 4em} No
padding-left Space between left border and content. length value, or percent value All {padding-left: 4em} No
padding-right Space between right border and content. length value, or percent value All {padding-right: 4em} No
padding-top Space between top border and content. length value, or percent value All {padding-top: 4em} No
width Width of element auto or a height value in length or percentage Block elements and IMG, INPUT, TEXTAREA, SELECT, and OBJECT {width: 40em} No

Background and Color Properties

NameJavaScript NameDescriptionPossible ValuesElement TypesExampleinherited
background Set background color, repeat, image, attachment, or position. See background-color, background-image, background-attachment, background-repeat, background-position All {background: #8080ff} No
background-attachment Determines if the background image is fixed or scroll. scroll, fixed All {background-attachment: scroll} No
background-color backgroundColor Sets the background color. Named or value color All {background-color: #8080ff} No
background-image Sets the background image. url All {background-image: url('../../../../gifs/flowers.gif')} No
background-position Sets the background image initial position. top, center, bottom, left, center, right, or percent values Block and IMG, INPUT, TEXTAREA, SELECT, and OBJECT {background-position: left top} No
background-repeat Sets how the background image is repeated. repeat, repeat-x, repeat-y, no-repeat All {background-repeat: no-repeat} No
color color Sets element color. Named or value color All {color: green} Yes

Classification Properties

NameJavaScript NameDescriptionPossible ValuesElement TypesExampleinherited
display Sets the type of element. block, inline, list-item, none All {display: list-item} No
list-style listStyle Sets list style type and/or position. See list-style-type and list-style-position List-item {list-style: circle} Yes
list-style-image Sets image to be used as the list item marker. url List-item {list-style-image: url(this.gif)} Yes
list-style-type Sets list style type. circle, disc, decimal, lower-alpha, lower-roman, none, square, upper-alpha, upper-roman List-item {list-style-type: square} Yes
list-style-position Sets where the marker is place relative to the text and its wrapping position. inside, outside List-item {list-style: circle} Yes
whitespace Sets treatment of spaces inside the element. normal, pre, nowrap Block {whitespace: pre} Yes

Font Properties

NameJavaScript NameDescriptionPossible ValuesElement TypesExampleinherited
font Used to define font properties See font-family, font-size, font-style, font-variant, and font-weight. All {font: 20pt} Yes
font-family fontFamily Used to define font family to use family name All {font-family: ariel roman} Yes
font-size Used to define font size to use xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, length value, or percent value All {font-size: 18pt} Yes
font-style fontStyle Used to define font style to use normal, italic, oblique All {font-style: italic} Yes
font-variant fontVariant Used to determine whether to use normal or small caps normal, small-caps All {font-variant: small-caps} Yes
font-weight fontWeight Sets font weight. normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 All {font-weight: 600} Yes

Text Properties

NameJavaScript NameDescriptionPossible ValuesElement TypesExampleinherited
letter-spacing Sets the space between characters. normal or length value All {letter-spacing: 0.2em} Yes
line-height lineHeight Sets the height of lines. normal, a number, a percent of the element font size, All {line-height: 2} Yes
text-align textAlign Sets the alignment of text. left, right, center, justify Block {text-align: center} Yes
text-decoration textDecoration Sets the special decoration attributes of text. none, overline, underline, line-through, blink All {text-decoration: blink} No
text-indent textIndent Sets the element's first line amount of indentation. length or percentage value Block {text-indent: 5%} Yes
text-transform textTransform Transforms text to one of the set values. none, capitalize, uppercase, lowercase All {text-transform: uppercase} Yes
vertical-align verticalAlign Sets vertical position. baseline, sub. super, top, middle, bottom, text-top, text-bottom, or percent value Inline {vertical-align: sub} No
word-spacing Sets extra space between words. normal or length value All {word-spacing: 0.2em} Yes
Recommend to a friend

Copyright © 2018 IdealExtensions.com. All Rights Reserved.

This site is not affiliated with or endorsed by the Joomla!™ Project. It is not supported or warranted by the Joomla!™ Project or Open Source Matters™. The Joomla!™ logo is used under a limited license granted by Open Source Matters™, the trademark holder in the United States and other countries.
We may collect your IP address and your browser's User Agent string while using our site for security reasons and deriving aggregate information (analytics). This information is retained for a minimum of 1 and a maximum of 24 months.
Feedback