javascript
CSS和JS样式属性对照表
注意：1、在使用js時，如newTD.style.paddingLeft="200";(錯誤)，正確生效的寫法是newTD.style.paddingLeft="200px";(正確)，不可少了px，否則不會生效。2、CSS中的float屬性是個例外，因為float是javascript的保留關鍵字，在IE中使用的是styleFloat，而其他瀏覽器則使用cssFloat。
| 盒子標簽和屬性對照 | |
| 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 | styleFloat / cssFloat |
| 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 |
| 顏色和背景標簽和屬性對照 | |
| CSS?語法（不區分大小寫） | JavaScript?語法（區分大小寫） |
| background | background |
| background-attachment | backgroundAttachment |
| background-color | backgroundColor |
| background-image | backgroundImage |
| background-position | backgroundPosition |
| background-repeat | backgroundRepeat |
| color | color |
| 樣式標簽和屬性對照 | |
| CSS語法（不區分大小寫） | JavaScript?語法（區分大小寫） |
| display | display |
| list-style-type | listStyleType |
| list-style-image | listStyleImage |
| list-style-position | listStylePosition |
| list-style | listStyle |
| white-space | whiteSpace |
| 文字樣式標簽和屬性對照 | |
| CSS?語法（不區分大小寫） | JavaScript?語法（區分大小寫） |
| font | font |
| font-family | fontFamily |
| font-size | fontSize |
| font-style | fontStyle |
| font-variant | fontVariant |
| font-weight | fontWeight |
| 文本標簽和屬性對照 | |
| 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 |
| html中td.class="aaa" | td.className="aaa" |
| webkit內核部分新增 | |
| CSS3 | JavaScript?語法（區分大小寫） |
| box-shadow | elemmnt.style.webkitBoxShadow |
| transform | elemmnt.style.webkitTransform |
| transform:translate | elemmnt.style.webkitTransform?= “translate(px,px)”; |
| transform:scale | elemmnt.style.webkitTransform?= “scale(x,y)”; |
| transform:rotate | elemmnt.style.webkitTransform?= “rotate(deg)”; |
| transform:skew | elemmnt.style.webkitTransform?= “skew(deg)”; |
| transform-origin | elemmnt.style.webkitTransformOrigin |
| transform-style | elemmnt.style.webkitTransformStyle |
| transition-property | elemmnt.style.webkitTransformProperty |
| transition-duration | elemmnt.style.webkitTransitionDuration |
| transition-timing-function | elemmnt.style.webkitTransitionTimingFunction |
| transition-delay | elemmnt.style.webkitTransitionDelay |
| animation-name | elemmnt.style.webkitAnimationName |
| animation-duration | elemmnt.style.webkitAnimationDuration |
| animation-timing-function | elemmnt.style.webkitAnimationTimingFunction |
| animation-iteration-count | elemmnt.style.webkitAnimationIterationCount |
| animation-direction | elemmnt.style.webkitAnimationDirection |
| animation-play-state | elemmnt.style.webkitAnimationPlayState |
| animation-delay | elemmnt.style.webkitAnimationDelay |
| background?linear-gradient | elemmnt.style.background?= “-webkit-gradient(linear, ~~)”; |
| background?radial-gradient | elemmnt.style.background?= “-webkit-gradient(radial, ~~)”; |
| text-shadow | elemmnt.style.textShadow |
| box-sizing | elemmnt.style.webkitBoxSizing |
| border-radius | elemmnt.style.webkitBorderRadius |
| border-top-left-radius | elemmnt.style.webkitBorderTopLeftRadius |
| border-top-right-radius | elemmnt.style.webkitBorderTopRightRadius |
| border-bottom-left-radius | elemmnt.style.webkitBorderBottomLeftRadius |
| border-bottom-right-radius | elemmnt.style.webkitBorderBottomRightRadius |
| border-image | elemmnt.style.webkitBorderImage |
| border-image-source | elemmnt.style.webkitBorderImageSource |
| border-image-slice | elemmnt.style.webkitBorderImageSlice |
| border-image-width | elemmnt.style.webkitBorderImageWidth |
| border-image-outset | elemmnt.style.webkitBorderImageOutset |
| border-image-repeat | elemmnt.style.webkitBorderImageRepeat |
轉載于:https://www.cnblogs.com/go-jzg/p/6087938.html
總結
以上是生活随笔為你收集整理的CSS和JS样式属性对照表的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JAVA学习三
- 下一篇： APP多版本共存，服务端如何兼容？