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


Posted in Javascript onOctober 19, 2017

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

先来看看运行效果:

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

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 点击切换按钮颜色</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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
基于Vue实现timepicker
Apr 25 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
JavaScript实现点击切换功能
Jan 27 Javascript
Vue如何从1.0迁移到2.0
Oct 19 #Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 #Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 #Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 #Javascript
微信小程序组件之srcoll-view的详解
Oct 19 #Javascript
JS实现点击循环切换显示内容的方法
Oct 19 #Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 #Javascript
You might like
无数据库的详细域名查询程序PHP版(4)
2006/10/09 PHP
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
jquery与prototype框架的详细对比
2013/11/21 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
基于ionic实现下拉刷新功能
2018/05/10 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
[00:35]2016完美“圣”典风云人物:冷冷宣传片
2016/12/08 DOTA
Python常见工厂函数用法示例
2018/03/21 Python
对python中的logger模块全面讲解
2018/04/28 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
浅析Python迭代器的高级用法
2020/07/16 Python
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
毕业生求职简历的自我评价
2013/10/23 职场文书
安全演讲稿大全
2014/05/09 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
老干部座谈会主持词
2015/07/03 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫