任意创建偶数个button，每两个button一行，通过点击任何按钮，可以实现相邻按钮间的颜色转换...

最新推荐文章于 2024-01-26 16:30:15 发布

weixin_30613433

最新推荐文章于 2024-01-26 16:30:15 发布

阅读量43

点赞数

原文链接：http://www.cnblogs.com/chllovegeyuting/archive/2013/03/02/2940421.html

版权

<html>

<head>

<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>

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].οnclick=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].οnclick=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>

转载于:https://www.cnblogs.com/chllovegeyuting/archive/2013/03/02/2940421.html

weixin_30613433

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
任意创建偶数个button，每两个button一行，通过点击任何按钮，可以实现相邻按钮间的颜色转换...

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>点击转换颜色</title><style>body{background-color:151E23}#d...
复制链接

扫一扫