如何使用 javascript 或 jquery 在单击时在任何 css 属性之间切换？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19085746/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i toggle between any css property on click using javascript or jquery?
提问by user2827600
i am very new to javascript but i need something like suppose i have a white background button when i click it once then its background should change to black and when i click again on it its background should change into white again. means i need to change background of the same button on clicking the same button, please help me, i am really very puzzle and i am also in learning stage of javascript so if you can tell me something more about javascript or any idea beside what i need, i would be thankful to you, thanks.
我对 javascript 很陌生，但我需要一些东西，比如假设我有一个白色背景按钮，当我点击它一次时它的背景应该变成黑色，当我再次点击它时它的背景应该再次变成白色。意味着我需要在单击同一个按钮时更改同一个按钮的背景，请帮助我，我真的很困惑，我也在学习 javascript 所以如果你能告诉我更多关于 javascript 的信息或任何想法，我需要，我会感谢你，谢谢。
回答by The Alpha
You may try something like this
你可以试试这样的
HTML:
HTML：
<button class="btn">Toggle Background</button>
CSS:
CSS：
.btn{
background:#fff;
}
.btn_red{
background:red;
}
JS:
JS：
$(function(){
$('.btn').on('click', function(){
$(this).toggleClass('btn_red')
});
});
Vanilla JavaScript :
香草 JavaScript ：
window.onload = function(){
document.querySelector('.btn').onclick = function(){
if(this.className.match('btn_red')) {
this.className = 'btn';
}
else {
this.className = 'btn btn_red';
}
};
};
DEMO.There are other ways but these are just some ideas.
演示。还有其他方法，但这些只是一些想法。
回答by luiges90
A jQuery solution would be
一个 jQuery 解决方案是
http://jsfiddle.net/zMrtL/(I put the text color to red so that on toggle it won't end up having text black on black i.e. invisible.)
http://jsfiddle.net/zMrtL/（我将文本颜色设置为红色，这样在切换时它就不会在黑色上显示黑色文本，即不可见。）
CSS
CSS
#div { /* use any selector that matches your desired element */
background-color: #FFF;
}
#div.dark { /* the "dark" class to be added by jQuery,
put your above selector in front to increase specificity */
background-color: #000;
}
About the "specificity" issue, if you don't add #divin front of dark, the #divdefinition will override the .darkdefinition and the div will remain white, even it is added by jQuery. Look at thisor thisif you want to know more.
关于“特异性”的问题，如果不加#div在前面dark，#div定义会覆盖.dark定义，div会保持白色，即使是jQuery添加的。如果您想了解更多，请查看此或此。
JavaScript/Jquery
JavaScript/Jquery
// ensure HTML is ready/completely loaded, so that you won't end up
// binding click to something non-existent (at the time the binding occurs)
// Trying to bind something non-existent will not work because jQuery can never know
// if there is such element in the future, unless you use delegates (far fetched)
$(function(){
// on click, bind the "click" event to your element, and do something
$('#div').click(function(){
$(this).toggleClass('dark'); // on click, toggle the class of the element clicked
// i.e. if the class does not exist, add it, otherwise remove it.
// in jQuery, "this" is the element clicked/mouse-overed/etc.. i.e. target of the event
// in functions passed to jQuery event-binding functions.
// CSS/browsers is smart enough to detect these class changes and apply styles to new elements.
});
});
#divmeans an element with id divi.e. <div id="div"></div>, as #means an element that has the following ID. If you have class instead i.e. <div class="div"></div>, use .div
#div表示具有 id 的元素，div即<div id="div"></div>，作为#表示具有以下 ID 的元素。如果你有类而不是 ie <div class="div"></div>，请使用.div
Documentations for click, toggleClass, and passing a function to jQuery constructor
