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