注意: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 |