使用 JQuery 添加到 css 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5877440/
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
Add to a css class using JQuery
提问by gotsp
Is it possible to add/update a css class using JQuery.
是否可以使用 JQuery 添加/更新 css 类。
I know I can add css to a DOM element using this add css rule using jquery, but I would like to add/remove from the css class itself.
我知道我可以使用 jquery使用此添加 css 规则将 css添加到 DOM 元素，但我想从 css 类本身添加/删除。
回答by William Niu
You cannot directly update the CSS classes in a separate css file with jQuery. You could however create a <style>tag and add/overwrite a CSS class:
您不能使用 jQuery 直接更新单独的 css 文件中的 CSS 类。但是，您可以创建一个<style>标签并添加/覆盖一个 CSS 类：
$('<style>.newClass { color: red; }</style>').appendTo('body');
When updating a CSS class, you'll need to take care the cascading order. Otherwise, it may not turn out to be the effect you are after.
更新 CSS 类时，您需要注意级联顺序。否则，它可能不会成为您所追求的效果。
回答by AnonUser
If I understand what you are trying to do I believe this should work for you.
如果我理解你想要做什么，我相信这对你有用。
$("#UniqueName").remove();
$("<style id="UniqueName" type='text/css'> .MyClass{ color:#f00 !important; font-weight:bold !important;} </style>").appendTo("head");
It'd be best to have logical small classes, and use jQuery's .toggleClass()method.
最好有逻辑小类，并使用jQuery 的.toggleClass()方法。
.Bold{ font-weight:bold; }
.Italic {font-style:italic;}
function SwitchFont(){
$(".MyObjects").toggleClass("Bold");
$(".MyObjects").toggleClass("Italic");
}
回答by HCarrasko
It's too easy using the lastest versions of Jquery, using something like this:
使用最新版本的 Jquery 太容易了，使用如下内容：
$('jQuery selector').css({"css property name":"css property value"});
For example:
例如：
$('#MyDiv').css({"background-color":"red"});
回答by hardik
- I have best example of how to apply CSS class in multiple tags.
- First create simple html page and inside write down your css.
- Next you create simple Query and and apply custom css.
- Now if you want apply which tag or attributes css using JQuery.
When I write down this code to easily understand
Code:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("h1,p").toggleClass("blue"); $("div").toggleClass("important"); }); }); </script> <style> .important { font-weight: bold; font-size: 40px; color: chartreuse; } .blue{ color: #000080; } </style> </head> <body> <h1>This is example</h1> <p>This is example</p> <div>Some important message </div> <button id="btn1">Add class </button> </body> </html>
- 我有关于如何在多个标签中应用 CSS 类的最佳示例。
- 首先创建简单的html页面并在里面写下你的css。
- 接下来，您创建简单的 Query 并应用自定义 css。
- 现在，如果您想使用 JQuery 应用哪些标签或属性 css。
当我写下这段代码以方便理解时
代码：
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("h1,p").toggleClass("blue"); $("div").toggleClass("important"); }); }); </script> <style> .important { font-weight: bold; font-size: 40px; color: chartreuse; } .blue{ color: #000080; } </style> </head> <body> <h1>This is example</h1> <p>This is example</p> <div>Some important message </div> <button id="btn1">Add class </button> </body> </html>
回答by Joe
You can do this by using the addClass and removeClass functions in jquery. Add the class like this:
您可以通过使用 jquery 中的 addClass 和 removeClass 函数来做到这一点。像这样添加类：
$("#button1").click(function(){
$(#the_div).addClass('myClass');
});
Then you can remove it like this:
然后你可以像这样删除它：
$("#button2").click(function(){
$("#the_div").removeClass('myClass');
});
Your CSS properties should be defined in ".myClass".
你的 CSS 属性应该在“.myClass”中定义。
回答by kobe
If you want to add new class or properties use add class
如果要添加新类或属性，请使用 add class
http://api.jquery.com/addClass/
http://api.jquery.com/addClass/
which will add the properties to the DOM elements.
这会将属性添加到 DOM 元素。
If you want to overwrite the existing properties use jquery .css , in your case Update
如果你想覆盖现有的属性使用 jquery .css ，在你的情况下更新
.css will add as an inline style , so all your class properties will be overwritten
.css 将添加为内联样式，因此您的所有类属性都将被覆盖
