使用javascript在两种颜色之间切换的最佳方法?

2024-04-11

Javascript初学者在这里。我本质上想做一个简单的切换。如果元素是黑色的,请将其更改为白色。如果是白色,请将其更改为黑色。

function changeClass() {
    if (document.getElementById('myButton').style.backgroundColor == "white") {
        document.getElementById('myButton').style.backgroundColor = "black";
    } else {
        document.getElementById('myButton').style.backgroundColor = "white";
    }
}
<button class="normal" id="myButton" onclick='changeClass()' >Change Colour</button>

不过这段代码相当混乱。有一个更好的方法吗?


切换一个类:

function changeClass(){
  document.getElementById('myButton').classList.toggle("the-class");
}

你的CSS在哪里:

.the-class {
    background-color: black;
}

...假设元素的正常背景颜色是白色。

更多关于classList here https://developer.mozilla.org/en-US/docs/Web/API/Element/classList。支持很好,但在较旧的环境中您可能需要一个polyfill。

Example:

function changeClass() {
  document.getElementById('myButton').classList.toggle("the-class");
}
.the-class {
  background-color: black;
}
<button class="normal" id="myButton" onclick='changeClass()'>Change Colour</button>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用javascript在两种颜色之间切换的最佳方法? 的相关文章

  • 从一个页面导航到另一个页面时,JavaScript 不会执行

    我正在构建我的第一个 Ruby on Rails 应用程序 并尝试创建一个动画导航栏 我正在使用 jQuery 和 Turbolink 这是我的application js under app assets javascripts docu
  • jQuery show() 和 hide() 的更流畅替代方案

    我有一个带有隐藏列的页面设置 使用 jQuery show 和 hide 函数将列滑入和滑出 然而 它有点 笨重 并且在显示 隐藏时看起来不太流畅 相比之下 我还有一个使用 jquery UI 手风琴的页面部分 当在这些部分之间切换时 过渡
  • 从 iframe 关闭父弹出窗口

    在domain1 com 上 我有一个链接 可以打开domain2 com 的弹出窗口 弹出窗口中有一个 iframe 也托管在 domain2 com 上 在 iframe 中 我试图关闭弹出窗口 我似乎对如何做到这一点感到困惑 在 if
  • flexslider 中的 GIF 滑块,如何仅在滑块上时开始 gif

    现在我有一个带有四个幻灯片的 Flexslider 第三个滑块是 gif 而不是像其他滑块一样是 jpg 我遇到的问题是 第三个 gif 滑块显然在到达页面时立即启动 而不是在您实际到达该滑块时启动 当点击前两个滑块时 gif 就快完成了
  • Google App Script postMessage 与收件人窗口的来源不匹配

    我有一个 Google App 脚本部署为Web应用程序 https developers google com apps script guides web 它工作正常 直到今天晚上我发现它无法在 Firefox 或 Chrome 中加载
  • 从画布保存/转换后文件质量下降的问题

    这是我正在使用的代码 代码位于这篇文章的底部 但这里是链接GitHubGist Noitidart ff addon snippet browseForBadgeThenCreateSaveAnApply js https gist git
  • 如何使用 JS/Puppeteer 上传文件

    我试图弄清楚如何将图片文件上传到输入对话框中 不可能只输入名称并按 Enter 键 因为我没有找到使用 Puppeteer 实现自动化的方法 我想我必须设置一些值作为图片 但我不知道该怎么做 有任何想法吗 您使用上传文件elementHan
  • 检查某个元素是否在没有 jQuery 的情况下“聚焦”

    我几乎确信我能在这里找到答案 但我没有成功 您如何检查事件调用时是否选择 聚焦 某个对象 我试过if document activeElement object HTMLBodyElement 但显然 activeElementonLoad
  • 当用户输入/删除时,使文本字段中的提示消失/重新出现[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 有谁知道我怎样才能在我的搜索栏中做出
  • IE9 中的 HTML5 视频两侧显示黑色边框

    我在我的网站中使用 HTML5 视频标签 该视频在所有浏览器中都能完美播放 但在 IE9 中它显示黑色边框 黑色扩展名 就像通常情况下 当播放器的大小大于视频的大小时 视频播放器会在其两侧显示一些黑色扩展 这是我们使用的解决方案 对于视频
  • Meteor JS:存储特定模板实例状态的最佳方法是什么?

    我正在学习 Meteor JS 中的会话和反应式数据源 它们非常适合设置全局 UI 状态 但是 我不知道如何将它们的范围限制到模板的特定实例 这就是我想做的 我的页面上有多个可内容编辑的元素 每个下面都有一个 编辑 按钮 当用户单击 编辑
  • 如何使用 Ajax 在 Flask 中发布按钮值而不刷新页面?

    我有一个问题 当我单击 Flask 应用程序中的按钮时 我想避免重新加载 我知道有 Ajax 解决方案 但我想知道如何将我的按钮链接到 ajax 函数以发布按钮值并运行链接到其值的 python 函数 这是我的 html 按钮 div di
  • 如何优化 Three.js 中多个 sphereGeometry 的渲染?

    我想优化 Three js 中 sphereGeometry 的渲染 因为它成为我的程序的瓶颈 javascript程序如下所示 var sphereThree for var idSphere 0 idSphere lt numSpher
  • 如何使用jquery点击眼睛图标时显示和隐藏密码

    我需要在单击眼睛图标时显示和隐藏用户密码 因此我为此编写了脚本 当我单击眼睛图标时 只有类正在更改 但密码不可见 再次单击斜线眼睛图标 它应该隐藏这两个图标方法不起作用如何解决这个问题
  • CSS 或 Javascript - 如果背景图像未加载,则显示后备文本[重复]

    这个问题在这里已经有答案了 如果徽标图形文件未加载或丢失 如何显示文本而不是徽标 我有带有背景 PNG 图像的 div div class iHaveBgImage this text should be displayed if bg i
  • 带有延迟的 jQuery 切换类只能运行一次

    当涉及到 jQuery 匿名函数和延迟时 我显然错过了一些基本的东西 下面的代码每次页面加载只能运行一次 它将添加该类 然后在 1 秒后将其删除 如果我再次单击 它将添加该类 但在页面持续时间内永远不会删除该类 除非我重新加载页面 var
  • CSS精灵什么时候适合使用,什么时候不适合使用?

    CSS精灵在什么情况下适合使用 什么时候不适合使用 是节省时间还是仅节省服务器请求 我认为带宽使用将是相同的 因为图像与大图像相同 但它是在一个部分中 何时何地使用 css sprite 是节省时间 工作中 的选择 对于导航来说 它有利于翻
  • Chrome + 另一个进程:进程间通信比 HTTP/XHR 请求更快?

    我有一个进程 1 对视频流进行实时图像处理 我需要在 Chrome 中的 HTML 页面中渲染该视频 同一台计算机上的进程 2 在canvas or img or videoHTML5 元素 由于我有 1000x1000 像素 x 3 字节
  • 通过均匀分布值来有效合并两个数组

    我见过许多问题 答案主题是通过交替值合并两个数组 他们是这样工作的 let array1 a b c d let array2 1 2 let outcome a 1 b 2 c d 但我希望输出更加高效 并且根据数组大小均匀分配值 exp
  • JavaScript 开关(真)

    你好 我正在尝试处理 ajax json 响应 这是我的代码 success function j switch true case j choice1 alert choice2 break case j choice2 alert ch

随机推荐

  • 如何平衡 GAN 中生成器和判别器的性能?

    这是我第一次使用 GAN 我面临着判别器多次优于生成器的问题 我正在尝试重现PA模型来自本文 http openaccess thecvf com content ICCV 2017 papers Sajjadi EnhanceNet Si
  • 使用视觉格式语言将视图置于其超级视图的中心

    我刚刚开始学习 iOS 的 AutoLayout 并了解了 Visual Format Language 除了一件事之外 一切都工作正常 我只是无法让视图在其超级视图中居中 这对于 VFL 是否可行 还是我需要自己手动创建约束 目前 不 看
  • C# - 管道式事件模型

    在 ASP NET Web 应用程序中 事件按特定顺序触发 为了简单起见加载 gt 验证 gt 回发 gt 渲染 假设我想开发这样的管道式事件 例子 活动1 观众正在聚集 各位 活动2和活动3请等待 直到我发出信号 事件 1 完成任务后 活
  • Android Studio 无法识别我的设备 - 一加一

    我激活了 开发人员选项 并选中 USB 调试 我在 sdk 上安装了 google usb 驱动程序 但 Android studio 仍然无法识别我的手机 一加一 我在朋友的笔记本电脑上测试了我的手机 它可以工作 当我安装驱动程序时 我的
  • 从回复中读取文本

    HttpWebRequest request WebRequest Create http google com as HttpWebRequest request Accept application xrds xml HttpWebRe
  • 如何使 CLion 自动格式化具有 Google 代码风格的 C++ 代码,并通过 google cpplint 检查

    我需要使用 google 代码样式自动格式化我的 C 代码 并通过 cpplint 检查 我已经使用 L 在 CLion 中自动格式化我的代码 但是格式化后的代码仍然不遵循 google 代码风格 而且我安装了 CLion cpplint
  • Rails 4:具有 has_many 的 CanCanCan 功能:通过关联

    我有一个包含以下模型的 Rails 应用程序 class User lt ActiveRecord Base has many administrations has many calendars through administratio
  • 无法使用 SSH 连接到 docker 容器 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 这个问题似乎不是关于主要由程序员使用的特定编程问题 软件算法或软件工具 help on topic 如果您认为该问题与主题相关另一个 St
  • Zurb 基金会和 IE 8

    下面的 css 示例适用于除 IE8 之外的所有受支持的浏览器 不关注任何低于 IE 8 的浏览器 我正在使用最新版本的 Foundation 当列应该浮动时 它们会在 IE8 中堆叠 实际看到float left 属性应用于样式但它们不浮
  • 在 Mongoose 字符串键中存储 Json 对象

    在我的 Mongoose 架构中 我有一个字符串字段 我希望能够在其中存储 JSON 对象 是否可以 在 Postgres 中 可以将字典存储在字符串列中 我想这样做是因为字典 实际上是 JS 中的 JSON 对象 只是一个简单的读写值 不
  • DatePicker 编辑器模板

    下面是一个 EditorTemplate 它使用以下命令呈现 Bootstrap 日期时间选择器EditorFor助手 我看到的问题是脚本部分 对于一个人来说效果还不错DateTimePicker每个视图 但由于我使用类选择器 每当我使用
  • 如何限制我网站的 API 用户?

    我网站的合法用户偶尔会使用 API 请求攻击服务器 从而导致不良结果 我想设定一个限制 即每 5 秒不超过一次 API 调用或每分钟 n 次调用 尚未弄清楚确切的限制 显然 我可以将每个 API 调用记录在数据库中 并对每个请求进行计算 看
  • 来自终端的 Linux powershell 命令返回命令未找到

    我有一个运行 Ubuntu Server 16 04 且带有 Powershell 的 Linux 机器 如果我从 Linux 终端运行 sudo powershell Invoke Webrequest http ipinfo io js
  • 如何测试在 VB.net TabControl 中选择了哪个选项卡

    我有一个带有两个 TabPage 的 TabControl 我想知道测试当前显示哪个选项卡的最佳方法是什么 我不知道为什么我无法弄清楚这一点 TabControl SelectedTab http msdn microsoft com en
  • F# 查询串联

    我在用SqlDataConnectionF 中的数据提供程序迁移一些行 迁移的一部分是在 3 个表之间进行连接 如下所示 将其视为表的继承A B C where B and C继承自A所以我需要得到的是 类似 Linq Bs Join As
  • 为什么非自定义标头包含在 Access-Control-Request-Headers 中?

    我正在尝试发送跨源请求 就Access Control Request Headers就我而言 我在 FireFox Chrome 和 Safari 中遇到了不同的行为 Chrome Access Control Request Heade
  • 如何在 Netbeans 中设置 java 编译器

    我正在进入 Java7 开发 并且我已将 JDK7 添加到Java 平台并在项目属性中选择它 但是当我编译时 我收到如下消息 warning java lang Boolean class java lang Boolean class m
  • 如何“对齐”2个字符串?

    首先让我解释一下 对齐 的含义 假设我们必须字符串 例如AGBCDEFABCDIEFK 他们的 结盟 是 A G B C D E F A B C D I E F K A B C D E F 另一个 相当简单的 例子 因为我相信我的问题可能与
  • 在 React 中使用 setState 更新对象

    我如何将多个状态传递给setState 这是一个例子 getInitialState function return list newFilm searchWord searchDetails componentDidMount funct
  • 使用javascript在两种颜色之间切换的最佳方法?

    Javascript初学者在这里 我本质上想做一个简单的切换 如果元素是黑色的 请将其更改为白色 如果是白色 请将其更改为黑色 function changeClass if document getElementById myButton