如何用JS控制CSS基本样式

1、用JS控制CSS基本样式的方法CSS code .class1width: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

2、window.onload = function()alert(document.getElementById(apDiv1).currentStyle.width) aaa 可以知道当前页面中引用还可以用 document.styleSheets(i).href的每个 css 的文件！另：CSS属性与JavaScript 编码对照表上次本人 _何向阳，在使用 js 修改 css 的中 margin-left 属性 未定义，后来，找了好多资料，才发现在 js 中， margin-left（一定要注意，时，总报 left的写法为 :marginLeft ，恍然大悟，希望遇到相同问题的朋友，谨慎对

3、待。）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语法(区分大小写

4、)borderBottom borderBottomColor borderBottomStyle borderBottomWidth borderColorborderLeft borderLeftColor borderLeftStyle borderLeftWidth borderRight borderRightColor borderRightStyle borderRightWidth borderStyle borderTop borderTopColor borderTopStyle borderTopWidth borderWidthclearfloatStyle margi

5、n margin-bottom margin-left margin-right margin-top padding padding-bottomborder border border-bottom border-bottom-color border-bottom-style border-bottom-width border-color border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-r

6、ight-width border-style border-top border-top-color border-top-style border-top-width border-width clear float margin marginBottom marginLeft marginRight marginTop padding paddingBottompadding-left padding-right padding-toppaddingLeftpaddingRight paddingTop颜色和背景标签和属性对照css语法（不区分大小写） JavaScript语法（区分大小

7、写） background background background-attachment background-color background-image background-position background-repeat color color 样式标签和属性对照CSS语法（不区分大小写） display display list-style-type list-style-image list-style-position list-style white-spacebackgroundAttachment backgroundColor backgroundImage ba

8、ckgroundPosition backgroundRepeatJavaScript语法（ 区分大小写 ）listStyleTypelistStyleImage listStylePosition listStylewhiteSpace文字样式标签和属性对照CSS语法（不区分大小写） font font font-family font-size font-style font-variant font-weightfontFamily fontSize fontStyle fontVariant fontWeight文本标签和属性对照CSS语法（不区分大小写） letter-spacing

9、 line-break line-height text-align text-decoration text-indent text-justify text-transform vertical-alignJavaScript语法（ 区分大小写 ）JavaScriptletterSpacing lineBreak lineHeight textAligntextDecorationtextIndenttextJustify textTransform verticalAlign语法（ 区分大小写 ）obj.style 方法，这个方法只能 JS 只能获取写在 html 标签中的写在 styl

10、e 属性 中的值( style=.)，看一下代码XML/HTM 代码vtitleJS 获取 CSS属性值 v/title JS 获取 CSS属性值 v/div alert(document.getElementById(css88).style.width);/200px alert(document.getElementById(css88).style.color);/空白和外部方法。上面这个例子对id为css88的div设置了 2种烦事的样式，包括style 样式 class 。从 alert 出来的信息可以看到， document.getElementById(css88).style

11、 法获取不到class为SS的属性和值。那么这么样才能获取到 class 为 ss 的属性和值呢？IE 中使用的是 obj.currentStyle方法，而 FF是用的是 getComputedStyle网上一个比较方法是：XML/HTM 代码vtitleS 获取 CSS属性值 v/title 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 文件同样适用。另：可以将上面的方法简化为返回最终样式函数，兼容