JavaScript(JS)與CSS屬性編碼方法對照表_CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　CSS與JS緊密配合，為我們的頁面增添了很多別致的效果。在Mb5u.com中也有相關的案例。為了達到某種特殊的效果我們需要用Javascript動態(tài)的去更改某一個標簽的CSS屬性。比如：鼠標經(jīng)過一個圖片時我們讓圖片加一個邊框，代碼可能是這樣：JavaScript中style后面的屬性應該是什么？

示例代碼 [www.hl5o.cn]

示例代碼 [www.hl5o.cn]

JavaScript CSS Style屬性對照表

盒子標簽和屬性對照

示例代碼 [www.hl5o.cn]

CSS語法 (不區(qū)分大小寫) 　　JavaScript語法 (區(qū)分大小寫)
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

顏色和背景標簽和屬性對照

示例代碼 [www.hl5o.cn]

CSS語法 (不區(qū)分大小寫) 　　JavaScript語法 (區(qū)分大小寫)
background 　　background
background-attachment 　　backgroundAttachment
background-color　　 backgroundColor
background-image 　　backgroundImage
background-position　　 backgroundPosition
background-repeat 　　backgroundRepeat
color 　　color

樣式標簽和屬性對照

示例代碼 [www.hl5o.cn]

CSS語法 (不區(qū)分大小寫) 　　JavaScript語法 (區(qū)分大小寫)
display 　　display
list-style-type　　 listStyleType
list-style-image 　　listStyleImage
list-style-position　　 listStylePosition
list-style　　 listStyle
white-space　　 whiteSpace

文字樣式標簽和屬性對照

示例代碼 [www.hl5o.cn]

CSS語法 (不區(qū)分大小寫) 　　JavaScript語法 (區(qū)分大小寫)
font　　 font
font-family　　 fontFamily
font-size　　 fontSize
font-style　　 fontStyle
font-variant　　 fontVariant
font-weight 　　fontWeight

文本標簽和屬性對照

示例代碼 [www.hl5o.cn]

CSS語法 (不區(qū)分大小寫) 　　JavaScript語法 (區(qū)分大小寫)
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