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

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

Jan 09, 2018 am 10:37 AM
javascript 切换 颜色

本文主要介绍了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

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

小米14Ultra如何切换4g和5g? 小米14Ultra如何切换4g和5g? Feb 23, 2024 am 11:49 AM

小米14Ultra是今年小米中非常火热的机型之一,小米14Ultra不仅仅升级了处理器以及各种配置,而且还为用户们带来了很多新的功能应用,从小米14Ultra销量就可以看出来手机的火爆程度,不过有一些常用的功能可能你还没了解。那么小米14Ultra如何切换4g和5g呢?下面小编就为大家介绍一下具体的内容吧!小米14Ultra怎么切换4g和5g?1、打开手机的设置菜单。2、设置菜单中查找并选择“网络”、“移动网络”的选项。3、移动网络设置中,会看到“首选网络类型”选项。4、点击或选择该选项,会看到

win11家庭版切换专业版操作教程_win11家庭版切换专业版操作教程 win11家庭版切换专业版操作教程_win11家庭版切换专业版操作教程 Mar 20, 2024 pm 01:58 PM

Win11家庭版怎么转换成Win11专业版?在Win11系统中,分为了家庭版、专业版、企业版等,而大部分Win11笔记本都是预装Win11家庭版系统。而今天小编就给大家带来win11家庭版切换专业版操作步骤!1、首先在win11桌面此电脑上右键属性。2、点击更改产品密钥或升级windows。3、然后进入后点击更改产品密钥。4、再输入激活密钥:8G7XN-V7YWC-W8RPC-V73KB-YWRDB,选择下一步。5、接着就会提示成功,这样就可以将win11家庭版升级win11专业版了。

Win10系统如何实现双系统切换 Win10系统如何实现双系统切换 Jan 03, 2024 pm 05:41 PM

很多朋友刚接触win系统的时候可能用不习惯,电脑中存着双系统,这个时候其实是可以双系统切换的,下面就一起来看看两个系统切换的详细步骤吧。win10系统如何两个系统切换方法一、快捷键切换1、按下“win”+“R”键打开运行2、在运行框中输入“msconfig”点击“确定”3、在打开的“系统配置”界面中选择自己需要的系统点击“设为默认值”,完成后“重新启动”即可完成切换方法二、开机时选择切换1、拥有双系统时开机会出现一个选择操作界面,可以使用键盘“上下”键进行选择系统

切换苹果电脑双系统启动方式 切换苹果电脑双系统启动方式 Feb 19, 2024 pm 06:50 PM

苹果双系统开机怎么切换苹果电脑作为一款功能强大的设备,除了搭载自家的macOS操作系统外,也可以选择安装其他操作系统,比如Windows,从而实现双系统的切换。那么在开机时,我们如何切换这两个系统呢?本文就来为大家介绍一下在苹果电脑上如何实现双系统的切换。首先,在安装双系统之前,我们需要确认自己的苹果电脑是否支持双系统切换。一般来说,苹果电脑都是基于

excel切换工作簿快捷键的使用方法 excel切换工作簿快捷键的使用方法 Mar 20, 2024 pm 01:50 PM

在excel软件的应用里,我们已经习惯使用快捷键,让有些操作变得更简单和快捷,excel的多个表格之间有时候会有相关的数据,我们在查看时,要不停的切换工作簿,如果有更快捷的切换方法,就会省下很多切换浪费的时间,对工作效率的提高有很大的帮助,什么办法可以完成快速的切换呢,针对这个问题,小编今天要讲的内容是:excel切换工作簿快捷键的使用方法。1、首先在打开的excel表格的下方可以看到有多个工作簿,需要快捷切换不同的工作簿,如下图所示。  2、然后按下键盘上的Ctrl键不动,如果需要向右选择工作

如何更改Windows 10任务栏的颜色 如何更改Windows 10任务栏的颜色 Jan 01, 2024 pm 09:05 PM

win10任务栏颜色修改起来非常简单,但是很多用户发现设置不了,其实非常的简单,只要在电脑的个性化里选择自己喜爱的颜色就可以了,要是改变不了颜色的注意详细的设置哦。win10任务栏颜色怎么改第一步:右键桌面——点击个性化第二步:颜色区域自定义第三步:选择喜欢的颜色PS:如果你无法改变颜色,可以点击颜色->选择颜色->自定义->默认windows模式,选择深色即可。

WPS文档表格颜色怎么设置你知道吗 WPS文档表格颜色怎么设置你知道吗 Mar 20, 2024 am 08:19 AM

我们在看到别人的WPS文档中表格颜色做出来的效果五颜六色,十分美观;而自己只有单调的黑色。如果过给表格填充颜色,我相信很多同学都会。但是,如果要在WPS文档中国设置表格的颜色的话,肯定有不少同学会觉得烧脑!今天,我们来学习一下关于如何设置WPS文档表格的颜色。我整理了一份文档,希望对大家有所帮助。步骤如下:1、我们需要在WPS文档中绘制一个表格,在要修改线条颜色的表格中点击鼠标右键。2、接着,用鼠标在表格上点击【鼠标右键】;在弹出的菜单中,我们找到【边框和底纹】。3、此时,会打开【边框和底纹】对

vivo全新X100系列内存、颜色曝光:全系12+256GB起步 vivo全新X100系列内存、颜色曝光:全系12+256GB起步 May 06, 2024 pm 03:58 PM

5月6日消息,今天vivo官方宣布,全新的vivoX100系列将在5月13日19:00正式发布。据了解,此次发布会预计将发布vivoX100s、vivoX100sPro、vivoX100Ultra三款机型,以及vivo自研影像品牌BlueImage蓝图影像技术。数码博主“数码闲聊站”今天也放出了这三款机型的官方渲染图、内存规格及配色等,其中X100s采用了直屏设计,而X100sPro和X100Ultra则是曲屏设计。该博主透露,vivoX100s共有黑、钛、青、白四种配色,内存规格

See all articles