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;

 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)";

宝剑锋从磨砺出,梅花香自苦寒来。
原文地址:https://www.cnblogs.com/haimengqingyuan/p/5425417.html