js修改css详解

js修改css详解2009 - 02 - 07   15 :11出处请看这里:http: // hi.baidu.com/ahbzhehu/blog/item/3237bc301da8cc9ea9018ec0.html

abc.css

CSS code

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

HTML code


<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN " >
< HTML >
< HEAD >
< link rel = " stylesheet "  type = " text/css "  href = " abc.css "   / >

< TITLE >  New Document  < / TITLE>
< script >
window.onload = fnInit;
function  fnInit(){
//  访问 styleSheet 中的一条规则, 将其 backgroundColor 改为蓝色。
var  oStyleSheet = document.styleSheets[ 0 ];
var  oRule = oStyleSheet.rules[ 0 ];
oRule.style.backgroundColor = " #0000FF " ;
}

< / script>
< / HEAD>

< BODY >
< div class = " class1 " > aaa < / div>
< / BODY>
< / HTML>

( 2 )


<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN " >
< HTML >
< HEAD >
< TITLE >  New Document  < / TITLE>

< style type = " text/css " >
<!--
#apDiv1 {
    position:absolute;
    width:399px;
    height:195px;
    z - index: 1 ;
    border:1px solid # 000 ;
    background - color:#CCCCCC;
}
-->
< / style>

< script >
window.onload  =   function (){
    alert(document.getElementById( ' apDiv1 ' ).currentStyle.width)
}

< / script>

< / HEAD>

< BODY >
< div id = " apDiv1 " > aaa < / div>


< / BODY>
< / HTML>


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

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

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

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

    比如：鼠标经过一个图片时我们让图片加一个边框，代码可能是这样：JavaScript中style后面的属性应该是什么？
< script type = " text/javascript " >     
     function  imageOver(e) {    
        e.style.border = " 1px solid red " ;    
    }    
     function  imageOut(e) {    
        e.style.borderWidth = 0 ;    
    }    
< / script>


< img src = " css.png "  onmouseover = " imageOver(this) "  onmouseout = " imageOut(this) "   / > 

    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代码
<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >    
< html xmlns = " http://www.w3.org/1999/xhtml " >    
< head >    
< meta http - equiv = " Content-Type "  content = " text/html; charset=utf-8 "   / >   
< title > JS获取CSS属性值 < / title>   
< style type = " text/css " >    
<!--  
.ss{color:#cdcdcd;} 
-->    
< / style>   
< / head>   
   
< body >    
< div id = " css88 "  class = " ss "  style = " width:200px; height:200px; background:#333333 " > JS获取CSS属性值 < / div>   
< script type = " text/javascript " >    
     alert(document.getElementById( " css88 " ).style.width); // 200px    
     alert(document.getElementById( " css88 " ).style.color); // 空白    
< / script>       
< / body>   
< / html>  

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

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

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

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

网上一个比较方法是：


XML / HTML代码
<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >    
< html xmlns = " http://www.w3.org/1999/xhtml " >    
< head >    
< meta http - equiv = " Content-Type "  content = " text/html; charset=utf-8 "   / >   
< title > S获取CSS属性值 < / title>   
   
< style type = " text/css " >    
<!--  
.ss{background:blue; color:#cdcdcd; width:200px} 
-->    
< / style>   
< / head>   
   
< body >    
< p id = " qq "  class = " ss "   > sdf < / p>   
   
< script type = " text/javascript " >    
function  GetCurrentStyle (obj, prop) {      
      if  (obj.currentStyle) {         
          return  obj.currentStyle[prop];      
     }       
      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 " ));    
< / script>   
< / body>   
< / html>  

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

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

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