首頁 > web前端 > js教程 > 主體

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

WBOY
發布: 2016-05-16 17:12:02
原創
1012 人瀏覽過

許多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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板