CSS Properties vs. JavaScript Coding method Tables

CSS and JS closely with, for our pages add a lot of chic effect. There are also related cases in the 52css.com. In order to achieve a particular effect we need to dynamically change the CSS properties of a particular label using JavaScript. For example: When the mouse passes a picture we let the picture add a border, the code may be like this: what should be the attributes behind the style in JavaScript?

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


JavaScript CSS Style Property Comparison table

Box label and Property control

CSS syntax (case-insensitive) JavaScript syntax (case-sensitive)
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

Color and background labels and properties control

CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)
background 　　　　　　　　　　　　background
background-attachment 　　 backgroundAttachment
background-color　　　　　　　　 backgroundColor
background-image 　　　　　　　 backgroundImage
background-position　　　　　　backgroundPosition
background-repeat 　　　　　　 backgroundRepeat
color 　　　　　　　　　　　　　　　　　 color

Style label and property control

CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)
display 　　　　　　　　　　　　　　　 display
list-style-type　　　　　　　　　　　listStyleType
list-style-image 　　　　　　　　　listStyleImage
list-style-position　　　　　　　　listStylePosition
list-style　　　　　　　　　　　　　　　listStyle
white-space　　　　　　　　　　　　whiteSpace

Text style label and property control

CSS语法 (不区分大小写) 　　JavaScript语法 (区分大小写)
font　　　　　　　　　　　　　　　　　　　font
font-family　　　　　　　　　　　　　　fontFamily
font-size　　　　　　　　　　　　　　　 fontSize
font-style　　　　　　　　　　　　　　 fontStyle
font-variant　　　　　　　　　　　　　fontVariant
font-weight 　　　　　　　　　　　　　fontWeight

Text label and attribute control

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