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>

 

<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的属性

<script language="JavaScript">

 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;

 　　　　　　}

 　　　　}

   　}

}

 </script>

 

<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" οnclick="changecss('.exampleA','color','red')"/>

<input type="button" value="Change A Black" οnclick="changecss('.exampleA','color','black')"/>