고정 헤더 영역
상세 컨텐츠
본문
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
| Name | JavaScript Name | Description | Possible Values | Element Types | Example | inherited |
|---|---|---|---|---|---|---|
| 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
| Name | JavaScript Name | Description | Possible Values | Element Types | Example | inherited | |
|---|---|---|---|---|---|---|---|
| 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
| Name | JavaScript Name | Description | Possible Values | Element Types | Example | inherited |
|---|---|---|---|---|---|---|
| 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
| Name | JavaScript Name | Description | Possible Values | Element Types | Example | inherited |
|---|---|---|---|---|---|---|
| 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
| Name | JavaScript Name | Description | Possible Values | Element Types | Example | inherited |
|---|---|---|---|---|---|---|
| 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 |
