JS控制CSS样式语法对照

来源:互联网 发布:python tf idf 编辑:程序博客网 时间:2024/06/05 08:55
JS控制CSS样式语法对照

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

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

附上一例:

<script type="text/javascript">        var objList  = document.getElementsByTagName("div");        for(var i = 0; i<objList.length; i++)        {           if(objList[i].className == "abc")           {              var parentNode = objList[i].parentNode;              parentNode.style.lineheight = "30px";           }        }     </script>


下面就是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-toppaddingTopbackgroundbackground 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