JavaScript访问CSS属性命名转换规则与对照表

JavaScript访问CSS属性命名转换规则

许多CSS样式属性的名称中包含连字符，而在JavaScript中，连字符会被解释为减号运算符。

因此，CSS2Properties对象中定义的属性名与实际的CSS属性名称存在差异。

若CSS属性名包含一个或多个连字符，在JavaScript中需移除所有连字符，并将紧接在连字符后的首个字母转换为大写，从而形成驼峰命名法。

需要注意的是，float是JavaScript的关键字，因此在JavaScript中访问该属性时，应使用cssFloat（Firefox等标准浏览器）或floatStyle（IE浏览器）。

CSS与JavaScript属性完整对照表

以下是CSS原生属性与JavaScript中对应编码的对照表：

盒子模型相关标签和属性对照： 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