Welcome 微信登录

首页 / 脚本样式 / JavaScript / js控制CSS样式属性语法对照表

CSS与JS紧密配合,为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。

例如常用的关闭某个漂浮的广告显示:document.getElementById("ad").style.display="none";相当于:.ad{ display:none}.

下面就是JS 控制CSS样式表的语法对照
CSS语法 (不区分大小写)JavaScript语法 (区分大小写) 
borderborder 
border-bottomborderBottom 
border-bottom-colorborderBottomColor 
border-bottom-styleborderBottomStyle 
border-bottom-widthborderBottomWidth 
border-colorborderColor 
border-leftborderLeft 
border-left-colorborderLeftColor 
border-left-styleborderLeftStyle 
border-left-widthborderLeftWidth 
border-rightborderRight 
border-right-colorborderRightColor 
border-right-styleborderRightStyle 
border-right-widthborderRightWidth 
border-styleborderStyle 
border-topborderTop 
border-top-colorborderTopColor 
border-top-styleborderTopStyle 
border-top-widthborderTopWidth 
border-widthborderWidth 
clearclear 
floatfloatStyle 
marginmargin 
margin-bottommarginBottom 
margin-leftmarginLeft 
margin-rightmarginRight 
margin-topmarginTop 
paddingpadding 
padding-bottompaddingBottom 
padding-leftpaddingLeft 
padding-rightpaddingRight 
padding-toppaddingTop
backgroundbackground 
background-attachmentbackgroundAttachment 
background-colorbackgroundColor 
background-imagebackgroundImage 
background-positionbackgroundPosition 
background-repeatbackgroundRepeat 
colorcolor 
displaydisplay 
list-style-typelistStyleType 
list-style-imagelistStyleImage 
list-style-positionlistStylePosition 
list-stylelistStyle 
white-spacewhiteSpace 
fontfont 
font-familyfontFamily 
font-sizefontSize 
font-stylefontStyle 
font-variantfontVariant 
font-weightfontWeight 
letter-spacingletterSpacing 
line-breaklineBreak 
line-heightlineHeight 
text-aligntextAlign 
text-decorationtextDecoration 
text-indenttextIndent 
text-justifytextJustify 
text-transformtextTransform 
vertical-alignverticalAlign