CSS属性与JavaScript 编码方法对照表

CSS与JS紧密配合，为我们的页面增添了很多别致的效果。在52CSS.com中也有相关的案例。为了达到某种特殊的效果我们需要用javascript动态的去更改某一个标签的CSS属性。比如：鼠标经过一个图片时我们让图片加一个边框，代码可能是这样：Javascript中style后面的属性应该是什么？

<script type="text/javascript">　 
　　 function imageOver(e) {　 
　　　　 e.style.border="1px solid red";　 
　　 }　 
　　 function imageOut(e) {　 
　　　　 e.style.borderWidth=0;　 
　　 }　 
</script>

<img src="http://www.cncms.com/01.png" />

JavaScript CSS Style属性对照表

盒子标签和属性对照

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