如何使用javascript或jquery在单击时在任何css属性之间切换？

我对javascript非常陌生，但我需要一些类似的东西，比如当我点击一次它时，我有一个白色背景按钮，然后它的背景应该变为黑色，当我再次点击它时，它的背景应该再次变为白色。这意味着我需要在单击同一按钮时更改同一按钮的背景，请帮帮我，我真的很困惑，我也在学习javascript的阶段，所以如果您能告诉我有关javascript的更多信息或除我需要的以外的任何想法，我将非常感谢您，谢谢。

jQuery解决方案将非常有用

（我将文本颜色设置为红色，以便启用“切换”时，文本不会以黑色变为黑色，即不可见。）

CSS 关于“专一性”问题，如果不在

dark

前面添加

#div

，则

#div

定义将覆盖

.dark

定义，并且div将保持白色，即使它是由jQuery添加的。看看或者如果你想知道更多

JavaScript/Jquery

#div

表示id为

div

的元素，即

，正如

#

表示具有以下id的元素。如果您使用class，即

，请使用

.div

---

和的文档

您可以尝试以下内容

HTML:

<button class="btn">Toggle Background</button>

.btn{
    background:#fff;
}

.btn_red{
    background:red;
}

$(function(){
    $('.btn').on('click', function(){
        $(this).toggleClass('btn_red')
   });
});

window.onload = function(){
    document.querySelector('.btn').onclick = function(){
        if(this.className.match('btn_red')) {
            this.className = 'btn';
        }
        else {
            this.className = 'btn btn_red';
        }
    };
};

JS:

<button class="btn">Toggle Background</button>

.btn{
    background:#fff;
}

.btn_red{
    background:red;
}

$(function(){
    $('.btn').on('click', function(){
        $(this).toggleClass('btn_red')
   });
});

window.onload = function(){
    document.querySelector('.btn').onclick = function(){
        if(this.className.match('btn_red')) {
            this.className = 'btn';
        }
        else {
            this.className = 'btn btn_red';
        }
    };
};

香草JavaScript:

<button class="btn">Toggle Background</button>

.btn{
    background:#fff;
}

.btn_red{
    background:red;
}

$(function(){
    $('.btn').on('click', function(){
        $(this).toggleClass('btn_red')
   });
});

window.onload = function(){
    document.querySelector('.btn').onclick = function(){
        if(this.className.match('btn_red')) {
            this.className = 'btn';
        }
        else {
            this.className = 'btn btn_red';
        }
    };
};

---

还有其他的方法，但这些只是一些想法。

我知道你对JavaScript还不熟悉，但你尝试了什么？同时，你也可以在Vanilla JS中使用

element.classList.toggle（“btn_red”）

。看。