JavaScript访问修改css样式表

1.访问元素中style属性的css样式

   可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问

  <div id="myid" style="backgroundColor:blue;"></div>

 

<script type="text/javascript">

var mydiv1=document.getElementById("myid");

alert(mydiv1.style.backgroundColor);

</script>

 

2.访问外部定义的css样式

 外部css是存储在类中，不是存储在style属性中，我们需要借助于类的样式表。我们先取得定义类的样式表的引用，用document.stylesheets集合实现这个目的，这个集合中包含html页面中所有的样式，dom为每个样式表定义一个cssRules的集合，这个集合中包含定义在样式表中所用的css规则（IE中是用rules）。

css样式表：

第一条规则

div{

 background-color:blue;

 width:200px;

 height:200px;

}

第二条规则

a.btn1{

  background:url(imag/1.jpg);

}

 

 

访问css

var mycssRules=document.stylesheets[0].cssRules||document.stylesheets[0].rules;

//访问第一条规则

alert(mycssRules[0].style.backgroundColor);

//设置值

mycssRules[0].style.backgroundColor="black";

 

//访问第二条规则

alert(mycssRules[1].style.background);

//设置值

mycssRules[1].style.background="url(imag/2.jpg)";