php js点击变色,JS实现按钮点击颜色切换功能示例分享

本文主要介绍了JS实现的按钮点击颜色切换功能,涉及js鼠标事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下，希望能帮助到大家。

先来看看运行效果：

具体代码如下：

www.jb51.net 点击切换按钮颜色

按钮1

按钮2

按钮3

//设置背景颜色

//如果设置参数函数会节省函数数量吧

//设置flag+参数函数

flag = "btn1";

function btn1(){

document.getElementById("btn2").style.color = "black";

document.getElementById("btn3").style.color = "black";

document.getElementById("btn1").style.color = "red";

}

function btn2(){

document.getElementById("btn1").style.color = "black";

document.getElementById("btn2").style.color = "red";

document.getElementById("btn3").style.color = "black";

}

function btn3(){

document.getElementById("btn1").style.color = "black";

document.getElementById("btn2").style.color = "black";

document.getElementById("btn3").style.color = "red";

}

function btn(num){

if(num == 1){

document.getElementById(flag).style.color = "black";

document.getElementById(flag).style.backgroundColor = "white";

document.getElementById("btn1").style.color = "red";

document.getElementById("btn1").style.backgroundColor = "blue";

flag = "btn1";

}

if(num == 2){

document.getElementById(flag).style.color = "black";

document.getElementById(flag).style.backgroundColor = "white";

document.getElementById("btn2").style.color = "red";

document.getElementById("btn2").style.backgroundColor = "blue";

flag = "btn2";

}

if(num == 3){

document.getElementById(flag).style.color = "black";

document.getElementById(flag).style.backgroundColor = "white";

document.getElementById("btn3").style.color = "red";

document.getElementById("btn3").style.backgroundColor = "blue";

flag = "btn3";

}

}