JavaScript背景颜色切换

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript背景颜色切换相关的知识,希望对你有一定的参考价值。

enter image description here

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

<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 切换按钮 - 选择时无法更改背景颜色