任意创建偶数个button，每两个button一行，通过点击任何按钮，可以实现相邻按钮间的颜色转换
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击转换颜色</title>
<style>
body{background-color:151E23}
#divIndexTop{width:100%;height:40px; position:absolute;}
.btnTop{border-width:0px;width:80px;height:25px; margin:0px; padding:0px;color:#666666;}
.btnTopOut{border-width:0px;width:80px;height:25px;margin:0px; padding:0px;}
.btnTopOver{border-width:0px;width:80px;height:25px;margin:0px; padding:0px;cursor:hand;font-weight:bold; background-color:#FFFFFF;}
</style>
</head>
<body> <div id="button" align="center"> </div>
<script>
var cnt = 8; for(var i=1;i<cnt+1;i++){ var input=document.createElement("input"); input.type="button"; input.id=i; input.value="button"+i; document.getElementById("button").appendChild(input); if(i % 2 == 0){ var br=document.createElement("br"); input.style.backgroundColor="blue"; document.getElementById("button").appendChild(br); } else { input.style.backgroundColor="red"; } }
var btns=document.getElementsByTagName("input");
//触发onMouseOver事件时 window.onload = function(){ var arr = document.getElementById("button").getElementsByTagName('input'); for(var i = 0;i<arr.length;i++){ arr[i].onclick = function(){ if(parseInt(this.id) % 2 == 0 ){ var o=document.getElementById(this.id); var o1=document.getElementById(parseInt(this.id)-1); if (o.style.backgroundColor != o1.style.backgroundColor) { var tmp = o.style.backgroundColor; o.style.backgroundColor = o1.style.backgroundColor; o1.style.backgroundColor = tmp; } } else{ var o=document.getElementById(this.id); var o1=document.getElementById(parseInt(this.id)+1); if (o.style.backgroundColor != o1.style.backgroundColor) { var tmp = o.style.backgroundColor; o.style.backgroundColor = o1.style.backgroundColor; o1.style.backgroundColor = tmp; } } } } }
btns[0].onclick=function ()
{
this.className="btnTopOver"; var o=document.getElementById("1"); o.style.backgroundColor="blue"; //根据你的 需要修改颜色即可
var o=document.getElementById("2"); o.style.backgroundColor="red"; // this.style.color="#000000";
};
//触发onMouseOut事件时
// btns[1].onclick=function ()
// {
// this.className="btnTopOut"; // var o=document.getElementById("1"); // o.style.backgroundColor="red"; //根据你的 需要修改颜色即可
// var o=document.getElementById("2"); // o.style.backgroundColor="blue";
// };
</script>
</body>
</html>
