JavaScript背景颜色切换

Posted 2023-01-16

我有这个简单的功能，只是简单地将按钮的背景颜色从浅绿色切换为红色，然后再次返回即可。但是，当我调用此函数时，它所做的只是将其更改为红色，但我不确定为什么。我在这里看过其他类似的例子，我觉得我做得正确。希望有帮助！

<button id = "button1" onclick="myFunction()">This is a button</button>

    button 
    background-color: Aqua;


function myFunction() 
  if (document.getElementById("button1").style.backgroundColor === "Aqua")
    document.getElementById("button1").style.backgroundColor = "Red";
    document.getElementById("button1").innerhtml = "I'm RED!!";
   else  
    document.getElementById("button1").style.backgroundColor = "Aqua";
    document.getElementById("button1").innerHTML = "I'm back BABY!!";
    

答案

第一个if语句应具有小写aqua ..如下所示

function myFunction() 
if (document.getElementById("button1").style.backgroundColor === "aqua") 
    document.getElementById("button1").style.backgroundColor = "red";
    document.getElementById("button1").innerHTML = "I'm RED!!";
 else 
    document.getElementById("button1").style.backgroundColor = "aqua";
    document.getElementById("button1").innerHTML = "I'm back BABY!!";

我通过console.log（document.getElementById（“ button1”）。style）;并且在日志中，您将拥有可以展开的对象，并发现css选择器为小写字母，也使红色相同以避免混淆。

希望有帮助

另一答案

它像这样工作

if ($("#yourselector").css('background-color')=="rgb(220, 
20, 60)") alert("matched");

您需要将名称转换为红色，绿色，蓝色组件，您可以使用此工具

http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php

另一答案

最简单的方法是将this传递到onclick()函数中，并使用三元运算符确定切换状态。

function myFunction(btn) 
  const isRed = btn.style.backgroundColor === "red";
  btn.style.backgroundColor = isRed ? "aqua" : "red";
  btn.innerHTML = isRed ? "I'm back BABY!!" : "I'm RED!!";

button 
  background-color: aqua;

<button id="button1" onclick="myFunction(this)">This is a button</button>

以上是关于JavaScript背景颜色切换的主要内容，如果未能解决你的问题，请参考以下文章

单击按钮时更改按钮的背景颜色[重复]

按钮背景颜色切换

如何使用背景图像切换背景颜色[重复]

导航条——动态改变导航菜单的背景颜色

用php怎么实现每刷新一次网页，背景颜色自动切换，且输出当前颜色代码​

材质 UI 切换按钮 - 选择时无法更改背景颜色