淺析JavaScript中的CSS屬性及命名規(guī)范
許多CSS樣式屬性的名字中都有連字符,在JavaScript中,連字符被解釋為減號(hào)。
因此,CSS2Properties對(duì)象的屬性名和真正的CSS屬性名有點(diǎn)不同。
如果一個(gè)CSS屬性名含有一個(gè)或多個(gè)連字符,在JS中則需要?jiǎng)h除了連字符,并且原來(lái)緊接在連字符后的字母改為大寫(xiě)。
要注意的是float是JS的關(guān)鍵字,所以在JS中float被寫(xiě)作cssFloat與或floatStyle。
下面是CSS自身屬性與JavaScript中CSS編碼對(duì)照表:
盒子標(biāo)簽和屬性對(duì)照:
Code
CSS語(yǔ)法 (不區(qū)分大小寫(xiě)) JavaScript語(yǔ)法 (區(qū)分大小寫(xiě))
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)簽和屬性對(duì)照:
Code
CSS語(yǔ)法 (不區(qū)分大小寫(xiě)) JavaScript語(yǔ)法 (區(qū)分大小寫(xiě))
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
color color
樣式標(biāo)簽和屬性對(duì)照:
Code
CSS語(yǔ)法 (不區(qū)分大小寫(xiě)) JavaScript語(yǔ)法 (區(qū)分大小寫(xiě))
display display
list-style-type listStyleType
list-style-image listStyleImage
list-style-position listStylePosition
list-style listStyle
white-space whiteSpace
文字樣式標(biāo)簽和屬性對(duì)照:
Code
CSS語(yǔ)法 (不區(qū)分大小寫(xiě)) JavaScript語(yǔ)法 (區(qū)分大小寫(xiě))
font font
font-family fontFamily
font-size fontSize
font-style fontStyle
font-variant fontVariant
font-weight fontWeight
文本標(biāo)簽和屬性對(duì)照:
Code
CSS語(yǔ)法 (不區(qū)分大小寫(xiě)) JavaScript語(yǔ)法 (區(qū)分大小寫(xiě))
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
- js 編寫(xiě)規(guī)范
- JavaScript開(kāi)發(fā)規(guī)范要求(規(guī)范化代碼)
- javascript代碼規(guī)范小結(jié)
- JavaScript的代碼編寫(xiě)格式規(guī)范指南
- JavaScript 開(kāi)發(fā)規(guī)范要求(圖文并茂)
- JavaScript 開(kāi)發(fā)中規(guī)范性的一點(diǎn)感想
- JavaScript之編碼規(guī)范 推薦
- JavaScript模塊規(guī)范之AMD規(guī)范和CMD規(guī)范
- 現(xiàn)如今最流行的JavaScript代碼規(guī)范
- 超全面的JavaScript開(kāi)發(fā)規(guī)范(推薦)
相關(guān)文章
JavaScript中解決多瀏覽器兼容性23個(gè)問(wèn)題的快速解決方法
下面小編就為大家?guī)?lái)一篇JavaScript中解決多瀏覽器兼容性23個(gè)問(wèn)題的快速解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
JavaScript實(shí)現(xiàn)復(fù)選框全選功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)復(fù)選框全選功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04
使用 Opentype.js 生成字體子集的實(shí)例代碼詳解
這篇文章主要介紹了使用 Opentype.js 生成字體子集,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
原生JS實(shí)現(xiàn)垂直手風(fēng)琴效果
本篇文章主要介紹了原生JS實(shí)現(xiàn)垂直手風(fēng)琴效果的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02
JavaScript 實(shí)現(xiàn)下雪特效的示例代碼
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)下雪特效的示例代碼,幫助大家利用JavaScript制作特效,感興趣的朋友可以了解下2020-09-09
javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼
手風(fēng)琴效果的下拉菜單大家都有見(jiàn)到過(guò)吧,實(shí)現(xiàn)的方法也有很多,這篇文章就為大家分享了javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼,純手寫(xiě)的,感興趣的朋友不要錯(cuò)過(guò)。2015-11-11
javascript如何計(jì)算數(shù)組中某值的出現(xiàn)次數(shù)
這篇文章主要介紹了javascript如何計(jì)算數(shù)組中某值的出現(xiàn)次數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01

