如何用JS控制CSS基本样式.doc

用JS控制CSS基本样式的方法 CSS code.class1 width:10px;background-color: red;HTML code New Document window.onload=fnInit;function fnInit()/ 访问 styleSheet 中的一条规则, 将其 backgroundColor 改为蓝色。var oStyleSheet=document.styleSheets0;var oRule=oStyleSheet.rules0;oRule.style.backgroundColor=#0000FF;aaa(2) New Document window.onload = function()alert(document.getElementById(apDiv1).currentStyle.width)aaa还可以用 document.styleSheets(i).href 可以知道当前页面中引用的每个css的文件！另：CSS属性与JavaScript编码对照表（一定要注意， 上次本人_何向阳，在使用js修改css的中margin-left属性时，总报left未定义，后来，找了好多资料，才发现在js中，margin-left的写法为:marginLeft，恍然大悟，希望遇到相同问题的朋友，谨慎对待。）CSS与JS紧密配合，为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。 比如：鼠标经过一个图片时我们让图片加一个边框，代码可能是这样：JavaScript中style后面的属性应该是什么？ function imageOver(e) e.style.border=1px solid red; function imageOut(e) e.style.borderWidth=0; JavaScript CSS Style属性对照表 盒子标签和属性对照CSS语法 (不区分大小写) JavaScript语法 (区分大小写) 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 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颜色和背景标签和属性对照CSS语法 (不区分大小写) JavaScript语法 (区分大小写) background background background-attachment backgroundAttachment background-color backgroundColor background-image backgroundImage background-position backgroundPosition background-repeat backgroundRepeat color color 样式标签和属性对照CSS语法 (不区分大小写) JavaScript语法 (区分大小写) display display list-style-type listStyleType list-style-image listStyleImage list-style-position listStylePosition list-style listStyle white-space whiteSpace 文字样式标签和属性对照CSS语法 (不区分大小写) JavaScript语法 (区分大小写) font font font-family fontFamily font-size fontSize font-style fontStyle font-variant fontVariant font-weight fontWeight 文本标签和属性对照CSS语法 (不区分大小写) JavaScript语法 (区分大小写) 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 verticalAlignobj.style方法，这个方法只能JS只能获取写在html标签中的写在style属性中的值（style=.），看一下代码XML/HTML代码 JS获取CSS属性值 JS获取CSS属性值 alert(document.getElementById(css88).style.width);/200px alert(document.getElementById(css88).style.color);/空白 上面这个例子对id为css88的div设置了2种烦事的样式，包括style和外部样式class。从alert出来的信息可以看到，document.getElementById(css88).style方法获取不到class为ss的属性和值。那么这么样才能获取到class为ss的属性和值呢？IE中使用的是obj.currentStyle方法，而FF是用的是getComputedStyle 方法。网上一个比较方法是：XML/HTML代码 S获取CSS属性值 sdf function GetCurrentStyle (obj, prop) if (obj.currentStyle) return obj.currentStyleprop; else if (window.getComputedStyle) propprop = prop.replace (/(A-Z)/g, -$1); propprop = prop.toLowerCase (); return document.defaultView.getComputedStyle (obj,null)prop; return null; var dd=document.getElementById(qq); alert(GetCurrentStyle(dd,width); 当然，如果您是引用外部的css文件同样适用。另：可以将上面的方法简化为JavaScript代码f