JavaScript Style Attributes
2015-06-05 22:26
666 查看
| 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
|
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 |
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 事件冒泡与事件捕获
- Javascript 多浏览器兼容性问题
- js 变量类型、相互转换
- js获取项目根目录
- JavaScript基础
- JSP请求页面（传参）
- 【JSOI 2008】【BZOJ 1016】最小生成数计数
- JSP基本用法（一）运行机制和语法
- a标签中的href,onclick,#,javascript:void简要分析 (转载)
- JSP运行机制
- JS 判断某个变量是否为空
- JavaScript学习笔记（三）
- js闭包
- js设置html标签的onclick函数
- jsp页面传中文参数乱码问题
- JavaScript中单引号和双引号的效果的一点区别
- js的with语句使用方法
- 用Js的eval解析JSON中的注意点
- js高效率数组去重
- 使用javascript生成的植物显示过程特效