浅析JavaScript中的CSS属性及命名规范

许多CSS样式属性的名字中都有连字符，在JavaScript中，连字符被解释为减号。

因此，CSS2Properties对象的属性名和真正的CSS属性名有点不同。

如果一个CSS属性名含有一个或多个连字符，在JS中则需要删除了连字符，并且原来紧接在连字符后的字母改为大写。

要注意的是float是JS的关键字，所以在JS中float被写作cssFloat与或floatStyle。

下面是CSS自身属性与JavaScript中CSS编码对照表：

盒子标签和属性对照：
Code
CSS语法 (不区分大小写)

JavaScript语法 (区分大小写)
border

border
border-bottom

borderBottom
border-bottom-color

borderBottomColor
border-bottom-style

borderBottomStyle
border-bottom-width

borderBottomWidth
border-color

borderColor
border-left

borderLeft
border-left-color

borderLeftColor
border-left-style

borderLeftStyle
border-left-width

borderLeftWidth
border-right

borderRight
border-right-color

borderRightColor
border-right-style

borderRightStyle
border-right-width

borderRightWidth
border-style

borderStyle
border-top

borderTop
border-top-color

borderTopColor
border-top-style

borderTopStyle
border-top-width

borderTopWidth
border-width

borderWidth
clear

clear
float

floatStyle(ie) cssFloat(FF) 
margin

margin
margin-bottom

marginBottom
margin-left

marginLeft
margin-right

marginRight
margin-top

marginTop
padding

padding
padding-bottom

paddingBottom
padding-left

paddingLeft
padding-right

paddingRight
padding-top

paddingTop

 

颜色和背景标签和属性对照：
Code
CSS语法 (不区分大小写)

JavaScript语法 (区分大小写)
background

background
background-attachment

backgroundAttachment
background-color

backgroundColor
background-image

backgroundImage
background-position

backgroundPosition
background-repeat

backgroundRepeat
color

color

样式标签和属性对照：

Code
CSS语法 (不区分大小写)

JavaScript语法 (区分大小写)
display

display
list-style-type

listStyleType
list-style-image

listStyleImage
list-style-position

listStylePosition
list-style

listStyle
white-space

whiteSpace

文字样式标签和属性对照：

Code
CSS语法 (不区分大小写)

JavaScript语法 (区分大小写)
font

font
font-family

fontFamily
font-size

fontSize
font-style

fontStyle
font-variant

fontVariant
font-weight

fontWeight

 

文本标签和属性对照：
Code
CSS语法 (不区分大小写)

JavaScript语法 (区分大小写)
letter-spacing

letterSpacing
line-break

lineBreak
line-height

lineHeight
text-align

textAlign
text-decoration

textDecoration
text-indent

textIndent
text-justify

textJustify
text-transform

textTransform
vertical-align

verticalAlign