jQuery 将 css 类更改为 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1835440/
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
jQuery changing css class to div
提问by eomeroff
If I have one div element for example and class 'first' is defined with many css properties. Can I assign css class 'second' which also has many properties differently defined to this same div just on some event without writing each property in line.
例如，如果我有一个 div 元素，并且类 'first' 是用许多 css 属性定义的。我可以分配 css 类 'second' ，它也有许多属性不同地定义到这个相同的 div 只是在某个事件上而不用在行中写入每个属性。
回答by womp
Yep, easily.
是的，很容易。
$("#mydiv").attr("class", "second");
回答by Mark Hurd
$(".first").addClass("second");
If you'd like to add it on an event, you can do so easily as well. An example with the click event:
如果您想将其添加到活动中，也可以轻松实现。单击事件的示例：
$(".first").click(function() {
$(this).addClass("second");
});
回答by Daff
You can add and remove classes with jQuery like so:
您可以像这样使用 jQuery 添加和删除类：
$(".first").addClass("second")
// remove a class
$(".first").removeClass("second")
By the way you can set multiple classes in your markup right away separated with a whitespace
顺便说一句，您可以立即在标记中设置多个类，并用空格分隔
<div class="second first"></div>
回答by Carvell Fenton
This may not be exactly on target because I am not completely clear on what you want to do. However, assuming you mean you want to assign a different class to a div in response to an event, the answer is yes, you can certainly do this with jQuery. I am only a jQuery beginner, but I have used the following in my code:
这可能不完全符合目标，因为我不完全清楚您想要做什么。但是，假设您的意思是要为响应事件的 div 分配一个不同的类，那么答案是肯定的，您当然可以使用 jQuery 来做到这一点。我只是一个 jQuery 初学者，但我在我的代码中使用了以下内容：
$(document).ready(function() {
$("#someElementID").click(function() { // this is your event
$("#divID").addClass("second"); // here your adding the new class
)};
)};
If you wanted to replace the first class with the second class, I believe you would use removeClass first and then addClass as I did above. toggleClass may also be worth a look. The jQuery documentation is well written for these type of changes, with examples.
如果您想用第二个类替换第一个类，我相信您会先使用 removeClass 然后再使用 addClass ，就像我上面所做的那样。toggleClass 也可能值得一看。jQuery 文档针对这些类型的更改编写得很好，并附有示例。
Someone else my have a better option, but I hope that helps!
其他人我有更好的选择，但我希望这会有所帮助！
回答by Awais
An HTML element like div can have more than one classes. Let say div is assigned two styles using addClass method. If style1 has 3 properties like font-size, weight and color, and style2 has 4 properties like font-size, weight, color and background-color, the resultant effective properties set (style), i think, will have 4 properties i.e. union of all style sets. Common properties, in our case, color,font-size, weight, will have one occuerance with latest values. If div is assigned style1 first and style2 second, the common prpoerties will be overwritten by style2 values.
像 div 这样的 HTML 元素可以有多个类。假设使用 addClass 方法为 div 分配了两种样式。如果 style1 有字体大小、粗细和颜色等 3 个属性，而 style2 有字体大小、粗细、颜色和背景颜色等 4 个属性，我认为由此产生的有效属性集（样式）将有 4 个属性，即联合所有样式集。常见的属性，在我们的例子中，颜色、字体大小、重量，将有一个具有最新值的出现。如果首先为 div 分配 style1，然后分配 style2，则通用属性将被 style2 值覆盖。
Further, I have written a post at Using JQuery to Apply,Remove and Manage Styles, I hope it will help you
此外，我在Using JQuery to Apply,Remove and Manage Styles写了一篇文章，希望对你有所帮助
Regards Awais
问候阿维斯
回答by Virang Maniar
$(document).ready(function () {
$("#divId").toggleClass('cssclassname'); // toggle class
});
**OR**
$(document).ready(function() {
$("#objectId").click(function() { // click or other event to change the div class
$("#divId").toggleClass("cssclassname"); // toggle class
)};
)};
