淺析JavaScript中的CSS屬性及命名規(guī)范
許多CSS樣式屬性的名字中都有連字符,在JavaScript中,連字符被解釋為減號(hào)。
因此,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中解決多瀏覽器兼容性23個(gè)問題的快速解決方法
下面小編就為大家?guī)硪黄狫avaScript中解決多瀏覽器兼容性23個(gè)問題的快速解決方法。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
JavaScript實(shí)現(xiàn)復(fù)選框全選功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)復(fù)選框全選功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04
使用 Opentype.js 生成字體子集的實(shí)例代碼詳解
這篇文章主要介紹了使用 Opentype.js 生成字體子集,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
原生JS實(shí)現(xiàn)垂直手風(fēng)琴效果
本篇文章主要介紹了原生JS實(shí)現(xiàn)垂直手風(fēng)琴效果的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02
JavaScript 實(shí)現(xiàn)下雪特效的示例代碼
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)下雪特效的示例代碼,幫助大家利用JavaScript制作特效,感興趣的朋友可以了解下2020-09-09
javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼
手風(fēng)琴效果的下拉菜單大家都有見到過吧,實(shí)現(xiàn)的方法也有很多,這篇文章就為大家分享了javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼,純手寫的,感興趣的朋友不要錯(cuò)過。2015-11-11
javascript如何計(jì)算數(shù)組中某值的出現(xiàn)次數(shù)
這篇文章主要介紹了javascript如何計(jì)算數(shù)組中某值的出現(xiàn)次數(shù)問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01

