許多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 margin
margin- top marginTop
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right 〦〦怦;
顏色和背景標籤和屬性對照:
Code
CSS語法(不區分大小寫) JavaScript語法(區分大小寫)
grounds backgroundAttachment
background-color backgroundColorbackground-image backgroundImagebackground-position backgroundPosition
樣式標籤與屬性對照:
Code
CSS語法(不區分大小寫) JavaScript語法(區分大小寫)
display display
list-style-type listStyleType
文字樣式標籤與屬性對照:
Code
CSS語法(不區分大小寫) JavaScript語法(區分大小寫)
font font
font-family fontFamily
font-size『〟〜『 >font-variant fontVariant
font-weight fontWeight
文字標籤與屬性對照:
CSS語法(不區分大小寫) JavaScript語法(區分大小寫)
letter-spacing 〝 lineBreak
line-height lineHeight
text-align textAlign
text-decoration textDecoration
text-indent textTransform
vertical-align verticalAlign