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

Javascript教程 2025-07-28

许多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