JS实现按钮点击颜色切换功能示例分享
本文主要介绍了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实现按钮点击颜色切换功能示例分享的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

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

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

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

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

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

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

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

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