JavaScript 與CSS Style屬性對照表

為了達到某種特殊的效果我們需要用Javascript動態的去更改某一個標籤的Css屬性。

例如：滑鼠經過一個圖片時我們讓圖片加一個邊框，程式碼可能是這樣：

JavaScript程式碼
[javascript] view plaincopyprint? 

[javascript] view plaincopyprint?    
   

JavaScript CSS Style屬性對照表

盒子標籤和屬性對照

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

border border
border-bottom borderBotAorderBot5(區分大小寫)
border border
border-bottom borderBotSorderBoto​​pbb維ight
border- right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTopstyle
border-width borderWidth
clear clear
float floatStyle
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginginhiight
margin-left marginLeft
margin-right marginRight padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop

 
顏色和背景標籤和屬性對照
CSS語法(不區分大小寫) JavaScript語法(區分大小寫)
background background
groundbackground-attachment backgroundAttm面
background-position backgroundPosition
background-repeat backgroundRepeat
color color

 
樣式標籤與屬性對照
CSS語法(不區分大小寫) JavaScript(2list-displist listpplay list playlist-display 是style-image listStyleImage
list-style-position listStylePosition
list-style listStyle

white-space whiteSpace

 
文字樣式標籤和屬性對照
CSS語法(不區分大小寫) JavaScript( font-family fontFamily
font-size fontSize
font-style fontStyle
font-variant fontVariant
font-weight fontWeight

 

文本標籤與屬性對照

CSSSletter -spacing letterSpacing
line-break lineBreak
line-height lineHeight
text-align textAlign
text-decoration textDecoration
text-indent textIndent
text-justify textDecoration
text-indent textIndent
text-justify textJusts