gpt4 book ai didi

javascript - 按钮背景颜色切换

转载 作者:太空宇宙 更新时间:2023-11-04 14:40:47 24 4
gpt4 key购买 nike

我一直在尝试切换按钮 onclick 的背景颜色属性,但颜色只改变一次,不会来回切换。下面是代码。

function btnColor(btn, color) {
var property = document.getElementById(btn);
if (property.style.backgroundColor == "rgb(244,113,33)") {
property.style.backgroundColor=color;
}
else {
property.style.backgroundColor = "rgb(244,113,33)";
}
}

<input type="button" id="btnHousing" value="Housing" onclick="toggleLayer('transparent1');btnColor('btnHousing','rgb(255,242,0)');" />

最佳答案

一个简单的解决方案(依次为 JS、CSS 和 HTML)。您在 CSS 中设置一个类,然后选择按钮(是的,JS 可以在一行中完成)并切换类。

var button1 = document.querySelector("button");


button1.addEventListener("click", function() {

document.body.classList.toggle("colorred");

});
.colorred {
background-color: red;
}
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Change color to background</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />


</head>

<body>
<button>Click me!</button>
<script src="main.js"></script>
</body>

</html>

关于javascript - 按钮背景颜色切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17050054/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com