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

编程学习 2021-07-04 17:32www.dzhlxh.cn编程入门
这篇文章主要介绍了JS实现的按钮点击颜色切换功能,涉及js鼠标事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下

本文实例讲述了JS实现的按钮点击颜色切换功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<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>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》及《》

希望本文所述对大家JavaScript程序设计有所帮助。

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板