淺析JavaScript中的CSS屬性及命名規(guī)范
許多CSS樣式屬性的名字中都有連字符,在JavaScript中,連字符被解釋為減號(hào)。
因此,CSS2Properties對(duì)象的屬性名和真正的CSS屬性名有點(diǎn)不同。
如果一個(gè)CSS屬性名含有一個(gè)或多個(gè)連字符,在JS中則需要?jiǎng)h除了連字符,并且原來(lái)緊接在連字符后的字母改為大寫。
要注意的是float是JS的關(guān)鍵字,所以在JS中float被寫作cssFloat與或floatStyle。
下面是CSS自身屬性與JavaScript中CSS編碼對(duì)照表:
盒子標(biāo)簽和屬性對(duì)照:
Code
CSS語(yǔ)法 (不區(qū)分大小寫) JavaScript語(yǔ)法 (區(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)簽和屬性對(duì)照:
Code
CSS語(yǔ)法 (不區(qū)分大小寫) JavaScript語(yǔ)法 (區(qū)分大小寫)
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ū)分大小寫) JavaScript語(yǔ)法 (區(qū)分大小寫)
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ū)分大小寫) JavaScript語(yǔ)法 (區(qū)分大小寫)
font font
font-family fontFamily
font-size fontSize
font-style fontStyle
font-variant fontVariant
font-weight fontWeight
文本標(biāo)簽和屬性對(duì)照:
Code
CSS語(yǔ)法 (不區(qū)分大小寫) JavaScript語(yǔ)法 (區(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ù)組最簡(jiǎn)單的實(shí)現(xiàn)方法
這篇文章主要介紹了javascript合并兩個(gè)數(shù)組最簡(jiǎn)單的實(shí)現(xiàn)方法,方法很簡(jiǎ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-11手把手教你在微信小程序中使用three.js(保姆級(jí)教程)
Three.js是一款運(yùn)行在瀏覽器中的3D引擎,你可以用它創(chuàng)建各種三維場(chǎng)景,包括了攝影機(jī)、光影、材質(zhì)等各種對(duì)象,下面這篇文章主要給大家介紹了關(guān)于如何在微信小程序中使用three.js的保姆級(jí)教程,需要的朋友可以參考下2023-03-03Javascript?中AJAX的圖書管理代碼實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了AJAX的圖書管理代碼實(shí)例,使用數(shù)據(jù)庫(kù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02javascript游戲開發(fā)之《三國(guó)志曹操傳》零部件開發(fā)(四)用地圖塊拼成大地圖
小時(shí)候我們玩過拼圖游戲,是用自己的手去拼的。今天我們來(lái)研究研究用javascript來(lái)拼圖感興趣的朋友可以了解下,希望本文對(duì)你有所幫助2013-01-01