主要是定义一个"t"变量.然后在循环里赋予各不同的字符串值.
还有就是用到setAttribute方法.
当t=="tt"的时候把t=="mm",然后把ID为"blue"的div的ID="red".
整体代码:
<!
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 content ="text/html; charset=gb2312" http-equiv ="Content-Type" >
< title > 无标题文档 </ title >
< style type ="text/css" >
#colors { position : absolute ; left : 300px ; top : 50px ; cursor : pointer ; }
#red { background : red ; padding : 8px ; }
#blue { background : blue ; padding : 8px ; }
</ style >
</ head >
< body >
< div id ="blue" >
</ div >
< div id ="colors" >
点击切换颜色
</ div >
< script type ="text/javascript" >
function changeColor(){
var t;
var colors = document.getElementById( " colors " );
colors.onclick = function (){
if (t == " tt " ){
t = " mm " ;
document.getElementById( " blue " ).setAttribute( " id " , " red " );
}
else {
t = " tt " ;
document.getElementById( " red " ).setAttribute( " id " , " blue " );
}
}
}
changeColor()
</ script >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta content ="text/html; charset=gb2312" http-equiv ="Content-Type" >
< title > 无标题文档 </ title >
< style type ="text/css" >
#colors { position : absolute ; left : 300px ; top : 50px ; cursor : pointer ; }
#red { background : red ; padding : 8px ; }
#blue { background : blue ; padding : 8px ; }
</ style >
</ head >
< body >
< div id ="blue" >
</ div >
< div id ="colors" >
点击切换颜色
</ div >
< script type ="text/javascript" >
function changeColor(){
var t;
var colors = document.getElementById( " colors " );
colors.onclick = function (){
if (t == " tt " ){
t = " mm " ;
document.getElementById( " blue " ).setAttribute( " id " , " red " );
}
else {
t = " tt " ;
document.getElementById( " red " ).setAttribute( " id " , " blue " );
}
}
}
changeColor()
</ script >
</ body >
</ html >