浅析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