javascript - 如何使用 if 语句用 JavaScript 更改 CSS？

Question

我有一个订阅按钮，其值为“订阅”或“取消订阅”，按下按钮时值会发生变化。

但是，我还希望当值为“取消订阅”时，按钮会改变颜色，直到再次按下按钮。

HTML:

<input onclick="change()" type="button" value="Subscribe" id="subscribe- 
   button"></input>

JavaScript:

function change()
{
    var elem = document.getElementById("subscribe-button");
    if (elem.value=="Unsubscribe") elem.value = "Subscribe";
    else elem.value = "Unsubscribe";
}

这是我尝试过的:

var elem = document.getElementById("subscribe-button");
if (elem.value == "Unsubscribe") {
    document.getElementById("subscribe-button").style.color = "blue";
    document.getElementById("subscribe-button").style.backgroundColor = 
"white";
    document.getElementById("subscribe-button").style.borderColor = 
"blue";
}

但这没有用。我做错了什么？

Answer 1

<input onclick="change()" type="button" value="Subscribe" id="subscribe-button"></input>

发生的情况是执行了js但是后面调用​​了change函数

function change() {
var elem = document.getElementById("subscribe-button");
if (elem.value == "Unsubscribe") {
    elem.value = "Subscribe"
} else {
    elem.value = "Unsubscribe";
    elem.style.color = "blue";
    elem.style.backgroundColor = "white";
    elem.style.borderColor = "blue";
}

希望这能以更系统的方式起作用，即扭曲样式表类中的所有样式并使用 js 附加该类