淺析JavaScript中的CSS屬性及命名規(guī)范
許多CSS樣式屬性的名字中都有連字符,在JavaScript中,連字符被解釋為減號。
因此,CSS2Properties對象的屬性名和真正的CSS屬性名有點(diǎn)不同。
如果一個(gè)CSS屬性名含有一個(gè)或多個(gè)連字符,在JS中則需要?jiǎng)h除了連字符,并且原來緊接在連字符后的字母改為大寫。
要注意的是float是JS的關(guān)鍵字,所以在JS中float被寫作cssFloat與或floatStyle。
下面是CSS自身屬性與JavaScript中CSS編碼對照表:
盒子標(biāo)簽和屬性對照:
Code
CSS語法 (不區(qū)分大小寫) JavaScript語法 (區(qū)分大小寫)
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
float floatStyle(ie) cssFloat(FF)
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
顏色和背景標(biāo)簽和屬性對照:
Code
CSS語法 (不區(qū)分大小寫) JavaScript語法 (區(qū)分大小寫)
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
color color
樣式標(biāo)簽和屬性對照:
Code
CSS語法 (不區(qū)分大小寫) JavaScript語法 (區(qū)分大小寫)
display display
list-style-type listStyleType
list-style-image listStyleImage
list-style-position listStylePosition
list-style listStyle
white-space whiteSpace
文字樣式標(biāo)簽和屬性對照:
Code
CSS語法 (不區(qū)分大小寫) JavaScript語法 (區(qū)分大小寫)
font font
font-family fontFamily
font-size fontSize
font-style fontStyle
font-variant fontVariant
font-weight fontWeight
文本標(biāo)簽和屬性對照:
Code
CSS語法 (不區(qū)分大小寫) JavaScript語法 (區(qū)分大小寫)
letter-spacing letterSpacing
line-break lineBreak
line-height lineHeight
text-align textAlign
text-decoration textDecoration
text-indent textIndent
text-justify textJustify
text-transform textTransform
vertical-align verticalAlign
相關(guān)文章
javascript合并兩個(gè)數(shù)組最簡單的實(shí)現(xiàn)方法
這篇文章主要介紹了javascript合并兩個(gè)數(shù)組最簡單的實(shí)現(xiàn)方法,方法很簡單,有需要的朋友們可以學(xué)習(xí)下。2019-09-09javascript實(shí)現(xiàn)去除HTML標(biāo)簽的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)去除HTML標(biāo)簽的方法,涉及javascript正則替換相關(guān)操作技巧,需要的朋友可以參考下2016-12-12JavaScript實(shí)現(xiàn)alert彈框效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)alert彈框效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11Javascript?中AJAX的圖書管理代碼實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了AJAX的圖書管理代碼實(shí)例,使用數(shù)據(jù)庫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(四)用地圖塊拼成大地圖
小時(shí)候我們玩過拼圖游戲,是用自己的手去拼的。今天我們來研究研究用javascript來拼圖感興趣的朋友可以了解下,希望本文對你有所幫助2013-01-01