JavaScript背景颜色切换
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript背景颜色切换相关的知识,希望对你有一定的参考价值。
我有这个简单的功能,只是简单地将按钮的背景颜色从浅绿色切换为红色,然后再次返回即可。但是,当我调用此函数时,它所做的只是将其更改为红色,但我不确定为什么。我在这里看过其他类似的例子,我觉得我做得正确。希望有帮助!
<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背景颜色切换的主要内容,如果未能解决你的问题,请参考以下文章