JS实现按钮颜色切换效果


Posted in Javascript onSeptember 05, 2020

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

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
vue 组件简介
Jul 31 Javascript
JS实现元素上下左右移动效果
Oct 18 #Javascript
JS去掉字符串中所有的逗号
Oct 18 #Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 #Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 #Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 #Javascript
VUE长按事件需求详解
Oct 18 #Javascript
vue router仿天猫底部导航栏功能
Oct 18 #Javascript
You might like
解析php开发中的中文编码问题
2013/08/08 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
JavaScript中splice与slice的区别
2017/05/09 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python将人民币转换大写的脚本代码
2013/02/10 Python
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
Python中join和split用法实例
2015/04/14 Python
Python栈类实例分析
2015/06/15 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
MIS软件工程师的面试题
2016/04/22 面试题
资产评估专业学生的自我鉴定
2013/11/14 职场文书
教师实习自我鉴定
2013/12/13 职场文书
医学专业自荐信
2014/06/14 职场文书
私人委托书格式
2014/09/10 职场文书
停车场管理协议书范本
2014/10/08 职场文书
商业用房租赁协议书
2014/10/13 职场文书
简爱读书笔记
2015/06/26 职场文书
辩论会主持词
2015/07/03 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL