淺析JavaScript中的CSS屬性及命名規格_javascript技巧

許多CSS樣式屬性的名字中都有連字符，在JavaScript中，連字符被解釋為減號。

因此，CSS2Properties物件的屬性名稱和真正的CSS屬性名稱有點不同。

如果一個CSS屬性名含有一個或多個連字符，在JS中則需要刪除了連字符，並且原來緊接在連字符後的字母改為大寫。

要注意的是float是JS的關鍵字，所以在JS中float被寫作cssFloat與或floatStyle。

以下是CSS自身屬性與JavaScript中CSS編碼對照表：

盒子標籤與屬性對照：
Code
CSS語法(不區分大小寫) 　　JavaScript語法(區分大小寫)
border 　C　　JavaScriptbpf> bottom 　　borderBottom
border-bottom-color 　　borderBottomColor
border-bottom-style　　 borderBottomStyle
border-bottom-width 　 borderBottomStyle
border-order-width 　》 order-left 　　borderLeft
border-left- color 　　borderLeftColor
border-left-style 　　borderLeftStyle
border-left-width 　　borderLeftWidth
border-right 　〜〦〵〕 border-right-style 　　borderRightStyle
border- right-width 　　borderRightWidth
border-style 　　borderStyle
border-top 　　borderTop
border-top-color 　　borderTopor] top-width 　　borderTopWidth
border- width 　　borderWidth
clear 　　clear
float　　 floatStyle(ie) cssFloat(FF) 
margin 　 marginmargin 　 marginmargin 　 marginmargin-right 　　marginRight
margin- top 　　marginTop
padding 　　padding
padding-bottom 　　paddingBottom
padding-left 　　paddingLeft
padding-right 〦〦怦;
 


顏色和背景標籤和屬性對照：

Code
CSS語法(不區分大小寫) 　　JavaScript語法(區分大小寫)

background 　　background

grounds backgroundAttachment

background-color　　 backgroundColor

background-image 　　backgroundImagebackground-position　　 backgroundPosition background-background-position　　

樣式標籤與屬性對照：


Code
CSS語法(不區分大小寫) 　　JavaScript語法(區分大小寫)
display 　　display
list-style-type　　 listStyleTypelist-style　　 listStyle

white-space　　 whiteSpace

文字樣式標籤與屬性對照：

Code
CSS語法(不區分大小寫) 　　JavaScript語法(區分大小寫)
font　　 font
font-family　　 fontFamily
font-size『〟〜『 >font-variant　　 fontVariant
font-weight 　　fontWeight

 

文字標籤與屬性對照：

Code

CSS語法(不區分大小寫) 　　JavaScript語法(區分大小寫)
letter-spacing　　 ​​〝 lineBreak
line-height　　 lineHeight
text-align　　 textAlign
text-decoration 　　textDecoration
text-indent 　　textTransform
vertical-align　　 verticalAlign