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

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

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="01.png" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />

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