首頁 >php教程 >PHP开发 >CSS屬性與JavaScript 編碼方法對照表

CSS屬性與JavaScript 編碼方法對照表

高洛峰
高洛峰原創
2016-11-28 16:20:561056瀏覽

CSS與JS緊密配合,為我們的頁面增添了許多別緻的效果。為了達到某種特殊的效果我們需要用Javascript動態的去更改某一個標籤的CSS屬性。例如:滑鼠經過一個圖片時我們讓圖片加上一個邊框,程式碼可能是這樣:JavaScript中style後面的屬性應該是什麼?


CSS屬性與JavaScript 編碼方法對照表

CSSg對照

CSS 文法(不區分大小寫)  JavaScript 語法(區分大小寫) 
border                  borderBottom
border-bottom-color  borderBottomColor 
border-bot湯姆風格:borderBottomStyle
border-bottom-width : borderBottomWidth
border-color:border-color:
border-left             borderLeft 
border-left-               borderLeftStyle 
border-left-width  borderLeftWidth    右邊框顏色〝           borderRightColor
右邊框樣式〝           borderRightStyle
右邊框-寬度          borderRightWidth 
border-style                   borderStyle 
border-top               borderTop 
border-top-color             borderTopColor
border-top-style            borderTopStyle 
border-top -width             borderTopWidth 
border-width                          清除
float                                    marginLeft 
margin-right                   marginRight 
margin-top    距                     內邊距左
內邊距右     paddingRight 
padding-top           

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


樣式標籤與屬性對照

CSS語法(不區分大小寫)   JavaScript語法(區分大小寫) 
display              㠀                                               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 -indent                          textIndent 
text  textJustify 
text-transform                     textTransform 



陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn