首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在单击时切换按钮颜色,并在再次单击时将颜色更改回以前的颜色

在前端开发中,可以通过JavaScript来实现在单击时切换按钮颜色,并在再次单击时将颜色更改回以前的颜色。以下是一个示例代码:

HTML部分:

代码语言:txt
复制
<button id="myButton" onclick="changeColor()">按钮</button>

JavaScript部分:

代码语言:txt
复制
function changeColor() {
  var button = document.getElementById("myButton");
  var currentColor = button.style.backgroundColor;
  var previousColor = button.getAttribute("data-previous-color");

  if (currentColor === previousColor) {
    // 切换颜色
    var newColor = getRandomColor();
    button.style.backgroundColor = newColor;
    button.setAttribute("data-previous-color", currentColor);
  } else {
    // 将颜色更改回以前的颜色
    button.style.backgroundColor = previousColor;
  }
}

function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

上述代码中,通过使用getElementById方法获取按钮元素,并使用style.backgroundColor属性获取当前按钮的背景颜色。同时,使用getAttribute方法获取按钮的data-previous-color属性值,该属性用于存储之前的颜色。

如果当前颜色与之前的颜色相同,则调用getRandomColor函数生成一个随机颜色,并将其设置为按钮的新颜色,同时使用setAttribute方法将当前颜色存储到data-previous-color属性中。如果当前颜色与之前的颜色不同,则将按钮的背景颜色更改为之前的颜色。

这样,每次单击按钮时,按钮的颜色就会在两种颜色之间切换。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【愚公系列】2023年11月 Winform控件专题 LinkLabel控件详解

打开窗体设计器中属性窗格。在属性窗格中,找到Image属性,并单击其旁边按钮,以打开图像选择器对话框。在图像选择器对话框中,选择要在链接文本旁边显示图像,然后单击“确定”按钮。..., EventArgs e){ // 当鼠标移开链接链接颜色改回默认颜色 this.linkLabel1.LinkColor = Color.Blue;}private void Form1...链接颜色改为橙色;当鼠标移开链接链接颜色改回默认颜色(蓝色)。...; label1.Visible = true;}这个方法会在用户点击LinkLabel控件被调用,并在TextBox控件中显示帮助文档内容。...最后,为了完善用户体验,可以窗体类Load事件处理方法中添加一些初始化代码,Label控件Visible属性设置为false,在启动应用程序时隐藏提示信息。

59311

Google Earth Engine (GEE) ——Earth Engine Explorer (EE Explorer)使用最全解析(8000字长文)

图层可见性 单击数据层名称右侧可见性按钮(眼睛图标),关闭数据层可见性。您将看到显示 Google 地图地形视图。 再次单击可见性按钮(眼睛图标)使数据图层再次在地图上可见。...如果您希望返回之前设置,请单击取消按钮。如果不保存就关闭图层设置,图层显示属性恢复到以前状态。 添加多个图层 通过添加其他数据集,您可以一次查看地图上多个数据图层。...例如,红色、绿色和蓝色反射带与红色、绿色和蓝色显示颜色配对产生与我们眼睛在平面上观看风景所看到非常相似的自然彩色图像。...单击保存按钮更改应用到地图图层显示并关闭图层设置。您应该会看到植被颜色从绿色变为红色戏剧性变化。 对比度、亮度和不透明度 数据范围 可以使用范围(最小值和最大值)和伽玛参数调整图像对比度和亮度。...打开和关闭顶层可见性,您将看到这座城市在 26 年期间增长。 您所见,在上面的两张图片之间查看,2011 年图片比 1986 年图片具有更大城市面积。

34810
  • Adobe Photoshop,选择图像中颜色范围

    4.对于取样颜色吸管指针放在图像或预览区域上,然后单击以对要包含颜色进行取样。 若要调整选区,请执行以下操作: 若要添加颜色,请选择加色吸管工具,并在预览区域或图像中单击。...若要移去颜色,请选择减色吸管工具并在预览或图像区域中单击。 注意:若要临时启动加色吸管工具,请按住 Shift 键。...8.若要存储和载入色彩范围设置,请使用“色彩范围”对话框中“存储”和“载入”按钮以存储和重新使用当前设置。 您可以肤色选择设置存储为预设。...3.为进行准确肤色选择,请选择“检测人脸”,然后调整“颜色容差”滑块或输入一个值。 为了有助于您进行选择,请确保显示选项设为“选区”,并选择选区预览以在文档窗口中查看选区。...4.单击“存储”按钮,在“存储”窗口中为肤色预设键入文件名,然后单击“存储”。 要载入肤色预设: 在“颜色范围”对话框中,单击“载入”按钮

    11.2K50

    【新!超详细】Figma组件属性完全指南

    例如,我创建了一个具有三种类型按钮:主要、次要和再次级。每个都有 4 种状态:启用、悬停、聚焦和禁用。此外,每个都有两个图标,一个在左边,一个在右边,加上一个文本标签。...您可以直接从属性面板中选择整个组件并在其中交换层。 何时使用实例交换属性? 当您想在另一个组件中交换组件使用它。例如,当您有一个按钮,您可以通过属性面板更改按钮内部图标。 目前,无法交换变体。...例如,创建一个具有不同状态(启用、悬停和禁用)按钮。 还有一件事,如果你想使用交互式组件,你必须使用变体。 如何在 Figma 中添加属性? 第一步,您需要创建一个组件。...选择组件,单击属性部分中加号图标,然后选择“变体”。 然后,在右侧菜单中,属性命名为“State”,变体命名为“Enable”。选择组件变体并单击加号图标以创建新变体。你现在有了一个新变种。...例如,如果要创建悬停按钮,请将其颜色从启用更改为悬停,并将其命名为悬停。您现在有一个包含两个变体变体组件集。 如何在 Figma 中编辑属性?

    11.9K22

    excel常用操作大全

    2.如何在文件下拉窗口底部设置最近运行文件名数量? 打开“工具”,选择“选项”,然后选择“常规”,并在“最近使用文件列表”下文件编号输入框中更改文件编号。...在EXCEL菜单中,单击文件-页面设置-工作表-打印标题;您可以通过按下折叠对话框按钮并用鼠标划定范围,标题设置在顶端或左端。这样,Excel会自动您指定部分添加为每页页眉。...鼠标移动到工作表名称上(如果您没有任何特殊设置,由Excel自动设置名称是“工作表1,工作表2,工作表3 .”),然后单击右键,并在弹出菜单中选择菜单项“选择所有工作表”。...,然后单击“添加”按钮保存输入序列。当您将来使用它,只需输入张三,然后光标指向单元格右下角填充手柄,并沿着要填充方向拖动填充手柄,您自定义序列就会出现。...名字公式比单元格地址引用公式容易记忆和阅读。例如,公式“=SUM”显然比使用单元格地址简单、更直观,而且不容易出错。 27.如何在公式中快速输入不连续单元格地址?

    19.2K10

    Sketch 94 mac,草图94中文最新版支持M1,支持macOS Ventura 13

    强大文本属性覆盖您现在可以在 Symbol 实例中覆盖字体属性,粗细、对齐、颜色等——这意味着您无需为项目中每个字体变体创建新文本样式。颜色覆盖覆盖所有颜色!...如果您在颜色弹出框中键入新颜色值,则现在在您单击其他位置以关闭弹出框应用这些值。我们更新了选择框设计。它现在使用应用程序强调色,容易看到选定图层(特别是在选择多个形状和画板)。...修复了在 macOS Ventura Beta 上使用 Mac 应用程序时,检查器中弹出按钮标签不会出现问题。修复了原型链接添加到非常大可能发生崩溃。...修复了在选择色调或调整颜色变量可能发生崩溃。修复了形状转换为轮廓有时会在画布上稍微移动它或移除其旋转或翻转错误。当您悬停或拖动线层调整大小手柄,您现在看到一个工具提示及其长度。...修复了智能布局问题,当使用包含另一个符号且覆盖设置为“无符号”符号实例这些覆盖更改回符号将不尊重它们在包含符号源中位置。

    11K70

    React 分析器简介

    正常使用你应用, 当你完成性能分析,点击 "Stop" 按钮。 [点击"stop",当你完成性能分析] 假设你应用程序在分析时至少渲染一次,开发者工具提供几种方法查看性能数据。...提交展示在分析器顶部附近条形图中: [提交条形图简介] 图表中每个条形表示单个提交,当前选定提交为黑色。 你可以单击条形图(或左/右箭头按钮)来选择其他提交。...你可以通过单击组件放大或缩小火焰图: [单击组件放大或缩小火焰图] 单击组件选中它并同时在右侧面板中其详细信息,其中包括其提交 props 和 state。...你可以通过单击右侧详细信息窗格中 "x" 按钮返回上一个图表。...你还可以从火焰图和排行榜视图中查看指定提交跟踪了哪些交互: [提交交互列表] 通过单击交互和提交,可以在交互和提交之间切换导航: [在交互和提交之间切换导航] 新跟踪 API,我们将在未来博文中详细地介绍它

    3K40

    Windows 10内部23个隐藏技巧

    单击它可以最小化所有打开窗口。 当您将鼠标悬停在此按钮上而不是单击,还可以选择使窗口最小化。在 “设置”>“个性化”>“任务栏”>“使用窥视”预览桌面中 选择您偏好 。 抖动 ?...单击“任务视图”后,可以按Windows按钮+ Ctrl +右/左箭头在虚拟桌面之间切换。这样一来,您便可以在所有打开窗口之间自动切换,而这些窗口已分为不同桌面,而桌面上所有图标均保持不变。...启用后,您只需说“嘿,Cortana, 恒温器 设置 为70度”即可。 暗模式和亮模式 ? Windows 10为您提供了对颜色主题大量控制。...打开 设置>个性化>颜色 ,您可以操作系统设置为暗模式或亮模式。这些主题更改“开始”菜单,任务栏,操作中心,“文件资源管理器”,“设置”菜单以及与这些调色板更改兼容任何其他程序颜色。...这使您可以Windows PC切换到游戏模式(该模式系统资源集中到游戏中,关闭通知,并允许您记录和广播游戏),并添加了用于控制音频面板。

    4.3K30

    会声会影2022中文版语言切换教程

    轻松组合,同步和编辑来自多个摄像头素材,并选择要在视频播放显示角度,使用会声会影Pro最多可组合4个摄像机角度,使用会声会影终极最多可组合6个角度。...轻松移动颜色并在每种颜色基础上提高饱和度和亮度,微调每个颜色开关HSL调谐,色调曲线,波形范围,查找表(LUT)配置文件等。2.动态分屏视频模板制作:屏幕是分屏视频限制。...步骤二,依次单击菜单栏中“设置 > 显示语言 > 英文”,如下图所示;从上图我们可以看出,会声会影还可以切换成繁体中文、德语、法语、意大利语、日语以及荷兰语。...步骤三,单击“英语”之后会弹出如下提示,我们单击“确定”按钮。...步骤四,单击“确定”之后,会声会影软件就会自动关闭,然后重启,重启之后就变成了英文版本,如下图所示;如果还想切换成中文版本,只需要再次单击菜单栏中“设置 > 显示语言 > 简体中文”,软件自动重启之后就变成中文版本了

    1.7K20

    CSS变量实现暗黑模式,我小铺页面已经支持

    最近微信被苹果逼开发了暗黑模式,越来越多网站和应用开始支持了暗黑模式,许多人也喜欢为网站选择暗模式,也许他们喜欢这样外观,或者他们想让自己眼睛免受疲劳。...现在我们需要定义一组新变量,这些变量将在调用 CSS 暗模式使用。...带上 Dark 颜色变量并在下面添加 @media 查询: /* 定义 dark 模式颜色 */ @media (prefers-color-scheme: dark) { :root {...如果有人使用深色操作系统主题并访问您网站,您网站现在将自动切换到黑暗模式。 下面是我博客博客小码页面,效果,支持手动切换和自动切换两种。...复选框更改为 number 并单击 + 符号。 值更改为 1 并单击 tick 按钮。 现在页面应该变黑。 回到您网站,主题应该已自动更新为黑暗模式。

    1.7K10

    Mastercam X2基本操作

    图1-12 打开文件 1.4.2  保存文件 Mastercam不但可以文件保存为目前版本和以前版本文件,MCX、MC9、MC8,而且可以保存为其他软件文件格式,实现与其他软件共享交换。...【系统配置】对话框【主题】栏中各选项含义介绍如下。 l 刀路模拟设置:设置在模拟刀具路径刀具各部分显示方式,快速步进量、夹头颜色等。...l 颜色:对整个Mastercam系统颜色进行管理,例如,可以设置各种部件(车床素材颜色、工具条背景颜色颜色、选择对象显示颜色绘图颜色、高亮显示颜色)等。...l 后处理设置:对输出后处理文件摘要进行定义,例如,输出NC文件,是否要询问或编辑等。 l 打印设置:设置打印各项参数,打印线宽和颜色等。...1.7.3  曲面平行精加工 根据零件形状创建平行精加工刀具路径,对粗加工残料进行精加工,具体操作步骤如下所示。 1.为了显示方便,单击切换刀具路径显示方式】按钮操作刀具路径隐藏。

    2.7K117

    Figma技巧超全合集!40+隐藏技能!快收藏!(第一辑)

    需要注意:Windows 中 Cmd 为 Ctrl,Option 为 Alt 01.按住CMD裁剪图像 您可以通过单击 Cmd 按钮来裁剪图像。...04.CMD后按数字键(改变不透明度) 选择一个元素并单击 cmd 按钮后,您可以通过单击 1 和 9 之间按钮来更改不透明度。(键 1 为 10%,键 9 为 90%)。你可能知道这一点。...所以你有一个最小工作空间。您可以使用相同组合键打开面板。 10.Cmd + |:此组合也仅隐藏左侧面板。您可以使用相同组合再次打开它。 11.Cmd + G: 对选定元素进行分组。...12.Cmd + Option + G:所选元素框在分组中。有时在调整元素大小时使用框架而不是组,这样方便。 13 — Control+ Shift + ?:显示所有键盘快捷键。...您还可以通过单击框架、矩形等来放置照片。 15.颜色选择:让我们选择一个可以填充颜色元素。在元素中选择填充选项后,您可以使用向上(浅色)和向下(深色)箭头键找到颜色浅色调和深色调。

    2.9K30

    MastercamX5中文版实例教程

    Ribbon工具栏位于工具栏最下方,可根据当前正在进行操作显示相应命令。例如,当用户单击 按钮进行直线绘制显示如图1-5所示直线工具栏。...当用户选择图素出现重合时,可以单击 按钮来进行验证。此时,在选择图素,系统会打开如图1-40所示验证操作框,用户可以通过 和 按钮来循环查找选择需要图素。...单击 按钮,可以报告信息进行保存。 选择“分析”|“体质/面积分析”|“曲面表面积”命令,系统提示用户选择需要分析曲面。...选择“屏幕”|“清除颜色”命令或单击 按钮可清除图素上颜色,恢复其本身颜色,并将其从组群中删除。...(3) 修改图素属性,在状态栏“属性”按钮处,单击鼠标左键和右键有何不同? (4) 解释系统公差和串连公差含义,以及如何进行设置。

    3.5K20

    PowerDesigner样式设置

    颜色和字体设置 1.单独设置某个对象颜色和字体 1.1修改实体填充色 (1)单击选中某个需要修改填充色实体。 (2)右击,在弹出式菜单中选择“Format”选项,系统弹出格式化窗口。...(3)切换到“Fill”选项卡中,选择Fill color为白色,如图所示: (4)单击确定或应用按钮,即可将选中实体修改为白色填充色。...1.2修改线条颜色 (1)选中需要修改线条颜色实体或者是关系。 (2)右击,在弹出式菜单中选择“Format”选项,系统弹出格式化窗口。...(3)切换到“Line Style”选项卡,修改Color为黑色,如图所示: (4)单击确定或应用按钮,即可将选中实体线条修改为黑色。...(3)切换到“Font”选项卡,左边会列出多个Symbol,可以实体名字、实体中属性、主键等分别设置不同字体。

    2.6K20

    SceneKit 场景编辑器-为您AR体验构建3D舞台

    如果场景附带动画,您可以通过单击“ 播放”按钮进行预览。 场景图视图 打开场景,通常会隐藏场景图视图。要显示它,请单击视口下方左下方小窗口图标,在控件旁边。在这里,您可以看到组成场景所有部分。...材质 让我们切换到Material Inspector。材质赋予模型物理外观,无论是颜色,照明还是纹理。没有材料,网格只是一个赤裸裸骨架。 我们介绍最常用材料属性,并将地球用作简单参考。...盒子位置 在“ 节点”检查器中,所有轴位置设置为0,以便在首次运行会​​话与摄像机位置对齐。 盒子颜色 我们为它指定一种颜色。我们选择颜色来自粉红色Apple Watch。...单击它,鼠标悬停在Apple Watch案例上,然后再次单击。我们给了它一个皮肤! 现在,它看起来不太吸引人,不是吗?让我们添加一些灯让它看起来逼真。...转到“ 材质”检查器,“ 着色”更改为“ Blinn”,单击“ 漫反射”,使用颜色选择器从Apple网站中选择图像手镯中颜色

    5.5K20

    CorelDRAW官方最新2021版本新增功能介绍

    要向活动工作区中添加工具或控件,请单击快速自定义按钮+ CorelDRAW 2021 工具箱 CorelDRAW 工具箱中许多工具都组织在展开工具栏中。要访问这些工具,请单击按钮右下角小箭头。...下方插图显示默认工作区中工具箱和展开工具栏,并且可以帮助您轻松查找工具。如果您仍然看不到要查找工具,请单击工具箱底部快速自定义按钮+ 。...符号工作流程增强 增强“符号”工作流程可以让您在大型库中快速搜索符号,并在其他对象中容易地识别符号,从而节省您时间。...渐进式图像编辑 强大新照片编辑功能专为以更少步骤增强图像质量而打造,让您尽情享受工作带来乐趣。 增强颜色替换 试用令人印象深刻全新替换颜色工具,以获得更快、简单完美照片。...页面布局 找到为小册子、多页文档等创建布局所有您需要工具。可以在单页编辑和多页编辑之间切换,让您以自己想要方式自由创作。

    2.9K00

    Cytoscape制作带bar图和pie图节点网络图

    点击 Options 按钮(左上方一个下三角形按扭),并选择Create New Style,然后填写一个名字作为你自己style。style1 4....修改结点颜色和形状 从图上可以看出圆形节点并不适合展示bar plot图,因此我们可以节点形状改为正方形,填充颜色改为白色。...方法为左侧属性中Fill Color和Shape选项,最左边按扭进行点击修改。 ? 10. 查看结点 单击选择一个节点,选中为黄色高亮。...根据自己需要改变一些默认参数 再次单击 Image/Chart 1 选项处默认格子以打开Graphics 会话窗口。...选择左下方 Options按钮,然后可以根据自己需求设置颜色、标签、展示或者隐藏坐标轴、改变线宽和增加bar之间距离。

    2.9K31

    ps学习笔记(二)

    “隔离开关”,当此按钮为红色,表示显示隔离层。...ctrl+shift+alt+t可以复制再次变形。 图层对齐方式 前提:选择多层,并切换到移动工具,可以设置图层间对齐方式,包括左中右,上中下,分布。...动作面板:alt+f9显示ps中自带动作,自动制作特殊效果。 1、动作可建立文件夹和动作。 2、动作建立后可直接录制。单击“停止”可结束录制;再次启动录制,单击“录制按钮”。...3、保存动作:在动作面板,右上角点出菜单,单击“存储”动作--输入名称,保存;保存为.atn文件。 可以.atn文件加载到PS安装动作文件夹里。...1.想控制指定几层,可以使用剪切蒙版实现。 2.当有调整层,选择调整层,会显示属性面板,在设置面板中设置相对应数值。 3.调整层自动添加蒙版,通过可控制调整层在图像中应用范围。具有所有蒙版特性。

    88940

    ArcGIS Pro中2D和3D模式下绘制地图

    6.可使用鼠标滚轮按钮进行缩放,然后按 C 以平移地图。放大到这座横跨威尼斯中心运河之上桥梁。 这就是里亚托桥,威尼斯最古老桥梁。 7.释放 C 键,以指针切换回地标符号。向该桥添加一个点。...如此低洼环境使威尼斯很容易受到洪水影响。要更好地了解威尼斯极为平坦地形,您需要在 3D 模式下显示它。 地图转换为场景 以前,地图在 2D 模式下显示数据。...注: 图层颜色是随机分配。可通过单击内容窗格中图层名称下符号颜色。 新栅格中值为 1 像素表示被淹没地区,而值为 0 像素表示未被淹没地区。对于您分析而言,仅被淹没地区是重要。...10.缩放至圣马可广场并浏览地图,以进一步了解已更新符号系统。 建筑物现在具有了真实纹理,而不只是普通颜色。然而,圣马可广场中塔现在缩成了小型平面建筑。其他建筑物高度也同样改变了。...提示: 完成取消选中后,您可能想要将选择合并模式设置更改回其默认状态,创建新选择。 接下来,移除所选要素。 20.单击编辑选项卡,然后在要素组中,单击删除。 完全移除其余所选要素。

    17410

    最全Pycharm教程(1)——定制外观

    1、准备工作首先确定你安装了2.7或者更高版本Pycharm(下载地址),下载请根据你系统平台下载对应版本即可。...注意此时位于对话框右上角Reset按钮,如果你改变了注意,可以通过单击这个按钮来恢复之前设置。同时当你鼠标移动至Apply按钮,它将变为可用状态:?...3、应用更改设置,建议重启Pycharm软件(例如当你主题改为 Darcula,冲击之后将是下面这种效果):?...4、如何更改编辑框主题颜色在更改完Pycharm主题背景之后,你可能对编辑器外观仍不满意,例如你希望文档字符串改变为另外一种颜色,下面介绍具体更改方法:首先,我们再次单击工具栏上图标进入“Settings...单击“Save as”按钮,然后键入一个新字体框架名称:?现在我们发现我们所新建字体类型变为可编辑状态,我们可以根据自己喜好对它进行修改。

    2.4K20
    领券