JavaScript修改CSS

JavaScript修改CSS

1. 修改元素的CSS名称：

<script language="JavaScript">
function change(id, newClass) {

identity=document.getElementById(id);

identity.className=newClass;

}
</script>

 

<style type="text/css">
.first
{
color: black;
}
.second
{
color: red;
}
</style>
<script language="JavaScript">
function change(id, newClass) {

identity=document.getElementById(id);

identity.className=newClass;

}
</script>
<h1 class="first" id="changeme">Changeable text</h1>
<a href="javascript:;" onClick="change('changeme', 'second');">RED</a> | <a href="javascript:;" onClick="change('changeme', 'first');">BLACK</a>

 

2. 修改CSS的属性（来自http://www.shawnolson.net/）

脚本：

function changecss(theClass,element,value) {
  var cssRules;
  if (document.all) {
   cssRules = 'rules';
  }
  else if (document.getElementById) {
   cssRules = 'cssRules';
  }
  for (var S = 0; S < document.styleSheets.length; S++){
   for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
    if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
     document.styleSheets[S][cssRules][R].style[element] = value;
    }
   }
  } 
 }

例子：

<span class="exampleA">Example A</span>
<span class="exampleB">Example B</span>
<span class="exampleA">Example A</span>
<input type="button" value="Change A Red" onclick="changecss('.exampleA','color','red')"/><input type="button" value="Change A Black" onclick="changecss('.exampleA','color','black')"/>