CSS屬性與JavaScript編碼對照表

 CSS與JS緊密配合，為我們的頁面增添了很多別緻的效果。為了達到某種特殊的效果我們需要用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="css.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