首页 >web前端 >js教程 >JS实现按钮点击颜色切换功能示例分享

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

小云云
小云云原创
2018-01-09 10:37:512912浏览

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

先来看看运行效果:

具体代码如下:

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="UTF-8"> 
  <title>www.jb51.net 点击切换按钮颜色</title> 
</head> 
<body> 
  <button id="btn1" onclick="btn(1)">按钮1</button> 
  <button id="btn2" onclick="btn(2)">按钮2</button> 
  <button id="btn3" onclick="btn(3)">按钮3</button> 
  <script> 
    //设置背景颜色 
    //如果设置参数函数会节省函数数量吧 
    //设置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"; 
      } 
    } 
  </script> 
</body> 
</html>

相关推荐:
JS按钮颜色切换效果的实现实例

微信小程序实现点击按钮修改字体颜色功能

利用JS实现点击按钮后图片自动切换的简单方法

以上是JS实现按钮点击颜色切换功能示例分享的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn