本文整理了 JavaScript 操作 CSS 样式时的属性名对照表。由于 CSS 语法不区分大小写且使用连字符，而 JavaScript 的 style 对象采用驼峰命名法且区分大小写，开发者需掌握如 borderBottom、backgroundColor 等具体写法。内容涵盖边框、背景、布局、字体及文本对齐等常用属性的转换规则，帮助准确进行前端样式控制。
边框与布局样式属性对照
在通过 JavaScript 控制 CSS 样式时，需要注意 CSS 属性名与 JS 对象属性名的转换规则。CSS 语法本身不区分大小写，通常使用连字符（如 border-bottom），而 JavaScript 的 style 对象属性名区分大小写，需采用驼峰命名法（如 borderBottom）。具体对照如下： - 边框相关：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；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。
背景、文字与文本属性对照
颜色和背景、样式标签、文字样式及文本属性的 JS 转换规则如下： - 颜色和背景：background 对应 background；background-attachment 对应 backgroundAttachment；background-color 对应 backgroundColor；background-image 对应 backgroundImage；background-position 对应 backgroundPosition；background-repeat 对应 backgroundRepeat；color 对应 color。 - 样式标签：display 对应 display；list-style-type 对应 listStyleType；list-style-image 对应 listStyleImage；list-style-position 对应 listStylePosition；list-style 对应 listStyle；white-space 对应 whiteSpace。 - 文字样式：font 对应 font；font-family 对应 fontFamily；font-size 对应 fontSize；font-style 对应 fontStyle；font-variant 对应 fontVariant；font-weight 对应 fontWeight。 - 文本属性：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。