JS实现按钮颜色切换效果

故里桃花落无踪,小楼轩窗山影重。若见瘦湖病西子,凋零秋风映山红。正是荷花成熟的季节,一朵朵荷花含苞怒放,满田野里的荷田闪烁着金光,一簇簇的荷花有的带着水珠乍开,有的含苞吐蕾,有的像个含羞的少女似开非开。

本文实例为大家分享了使用参数函数实现按钮颜色切换的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</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获取鼠标点击时的位置

JS获取URL参数

Ajax跨域问题及解决方案(jsonp,cors)

ajax动态加载json数据并详细解析

ajax从JSP传递对象数组到后台的方法