使用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 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • 有角度的动态背景图片

    在 html 模板中 我有这种带有动态图像的样式 div style background none width 200px height 150px div 它适用于网络浏览器和 Android 浏览器 但是 使用 style 的动态背景
  • 摩卡 - Chai Karma“套件未定义”

    我对 jscript tdd 很陌生 遇到了问题 希望有人能告诉我我在做什么 在浏览器中运行测试 通过 HTML 文件 一切正常 通过节点和业力运行它们我得到以下异常 我想在 node js 主机的 karma 中使用 Mocha 和 Ch
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • 最大宽度调整以适应文本?

    不是最好的标题 但无论如何 我有一个元素max width和一些文字 如果文本长度超过一行所能容纳的长度 我会得到以下结果 My text here hello everyone 换句话说 它占据了完整的最大宽度 但由于单词向下移动 右侧有
  • 隐藏 Div 的父级

    我只是想隐藏父divcomments section div class content content green div div div 我试过这个 document getElementById comments section pa
  • 如何将函数附加到弹出窗口关闭事件(Twitter Bootstrap)

    我做了一些搜索 但我只能认为我可以将事件附加到导致其关闭的按钮 https stackoverflow com questions 13205103 attach event handler to button in twitter boo
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • window.location 和 location.href 之间的区别

    我对之间的区别感到困惑window location and location href 两者似乎都以相同的方式行事 有什么不同 window location是一个对象 它保存有关当前文档位置的所有信息 主机 href 端口 协议等 lo
  • 正则表达式 - 从 markdown 字符串中提取所有标题

    我在用灰质 https www npmjs com package gray matter 以便将文件系统中的 MD 文件解析为字符串 解析器产生的结果是这样的字符串 n Clean er ReactJS Code Conditional
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 对于只触及我的工作表的 Google 表格脚本,收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该
  • 在 JavaScript 循环之外声明变量可以提高速度和内存?

    C 也有类似的问题 但我们没有看到 JavaScript 的任何问题 在循环内声明变量是否可以接受 假设循环有 200 次迭代 使用样本 2 相对于样本 1 是否有性能要求 内存和速度 我们使用 jQuery 来循环 它提高了我们将 var
  • 在 Javascript 中连接空数组

    我正在浏览一些代码 我想知道这有什么用处 grid push concat row 根据我的理解 它等同于 grid push row 为什么要大惊小怪 连接 你想使用 concat当您需要展平数组并且没有由其他数组组成的数组时 例如 va
  • Javascript - 水波纹效果

    我需要 JS 上的脚本 它将以 水波纹 样式更改 images html 抱歉 6MB GIF 文件 http fcuunited ru temp listening2 gif http fcunited ru temp listening
  • 如何确定所有角度2分量都已渲染?

    当所有 Angular2 组件完成渲染时 是否会触发一个角度事件 For jQuery 我们可以用 function 然而 对于 Angular2 当domready事件被触发 html 只包含角度组件标签 每个组件完成渲染后 domrea
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev
  • 在 Nexus 7 2013 上更改方向时 CSS 媒体查询不起作用

    我目前正在我的笔记本电脑 台式电脑和 Nexus 7 2013 上测试 CSS 媒体查询 除了 Nexus 7 之外 它们在台式机和笔记本电脑上都运行良好 当我更改方向时 除非刷新页面 否则样式不会应用 例如 以纵向模式握住设备时 页面正常

随机推荐

  • 如何平衡 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