css教程：JS控制样式的代码

CSS 代码

.class1 
{
width:10px;
background-color: red;
}

HTML code

(2)

还可以用   document.styleSheets(i).href   可以知道当前页面中引用的每个css的文件！

另：CSS属性与JavaScript编码对照表

（一定要注意，在使用js修改css的中margin-left属性时，总报"left"未定义，后来，找了好多资料，才发现在js中，margin-left的写法为:marginLeft，恍然大悟，希望遇到相同问题的朋友，谨慎对待。）

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

    比如：鼠标经过一个图片时我们让图片加一个边框，代码可能是这样：JavaScript中style后面的属性应该是什么？

    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　　 verticalAlign

obj.style方法，这个方法只能JS只能获取写在html标签中的写在style属性中的值（style="..."），看一下代码

XML/HTML代码
 XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
   
   
   
   
   
  

上面这个例子对id为"css88"的div设置了2种烦事的样式，包括style和外部样式class。

从alert出来的信息可以看到，document.getElementById("css88").style方法获取不到class为ss的属性和值。

那么这么样才能获取到class为ss的属性和值呢？

IE中使用的是obj.currentStyle方法，而FF是用的是getComputedStyle 方法。

网上一个比较方法是：

XML/HTML代码
   
   
   
   
  

sdf

当然，如果您是引用外部的css文件同样适用。

另：可以将上面的方法简化为

JavaScript代码
function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性    
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];   
}