Javascript 使用 JQuery 更改类中的 CSS 规则
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6115325/
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
Change CSS rule in class using JQuery
提问by jdw
I have a class in CSS
我有一个 CSS 类
.Foo
{
width:20px;
}
Using Jquery I would like to do something similar to this on an event:
使用 Jquery 我想在一个事件上做类似的事情：
$(".Foo").css("width", "40px");
This doesn't work. Is this the wrong approach? Should I use addClass() and removeClass()?
这不起作用。这是错误的方法吗？我应该使用 addClass() 和 removeClass() 吗？
EDIT: I figured out my problem. This command does in fact work. In my particular application I hadn't created the elements using the class before I used the command, so when they were created nothing was changed.
编辑：我想出了我的问题。这个命令确实有效。在我的特定应用程序中，在使用命令之前我没有使用类创建元素，因此在创建它们时没有任何更改。
Basically this command doesn't change the CSS style rule, just the elements using the class.
基本上这个命令不会改变 CSS 样式规则，只会改变使用类的元素。
采纳答案by namuol
jQuery.csswill find all existingelements on the page that have the Fooclass, and then set their inlinestyle widthto 40px.
jQuery.css将找到页面上所有具有该类的现有元素Foo，然后将它们的内联样式设置width为40px.
In other words, this doesn't create or change a css rule -- if you dynamically add an element with the Fooclass, it would still have a width of 20px, because its inline style hasn't been set to override the default CSS rule.
换句话说，这不会创建或更改 css 规则——如果您使用Foo类动态添加一个元素，它的宽度仍然为20px，因为它的内联样式尚未设置为覆盖默认的 CSS 规则。
Instead, you should use addClassand removeClassand control the styles in your static CSS.
相反，您应该使用addClass和removeClass控制静态 CSS 中的样式。
回答by gilly3
You canchange a CSS style rule. You need to look at:
您可以更改 CSS 样式规则。你需要看看：
document.styleSheetscollectionstyleSheet.cssRulesproperty (or styleSheet.rulesfor IE7 and IE8)rule.selectorTextpropertyrule.styleproperty
document.styleSheets集合styleSheet.cssRules属性（或styleSheet.rules对于 IE7 和 IE8）rule.selectorText属性rule.style属性
For example:
例如：
var ss = document.styleSheets[0];
var rules = ss.cssRules || ss.rules;
var fooRule = null;
for (var i = 0; i < rules.length; i++)
{
var rule = rules[i];
if (/(^|,) *\.Foo *(,|$)/.test(rule.selectorText))
{
fooRule = rule;
break;
}
}
fooRule.style.width = "40px";
Working demo: jsfiddle.net/kdp5V
工作演示：jsfiddle.net/kdp5V
回答by nerdess
you could add the styling manually to the header with jquery:
您可以使用 jquery 手动将样式添加到标题中：
$('head').append('<style id="addedCSS" type="text/css">.Foo {width:40px;}</style>');
then change it on an event like e.g. so:
然后在像这样的事件上改变它：
$(window).resize(function(){
$('#addedCSS').text('.Foo {width:80px;}');
});
回答by AlbertVo
Yes, you should use addClass and removeClass to change the styling. In your css, define a couple of different classes and switch between them.
是的，您应该使用 addClass 和 removeClass 来更改样式。在您的 css 中，定义几个不同的类并在它们之间切换。
回答by sophistihip
You should be selecting an element with jQuery. You're aware that you aren't selecting the CSS class itself, correct?
您应该使用 jQuery 选择一个元素。您知道您没有选择 CSS 类本身，对吗？
Once you have an element with class="Foo", you can select it as you have, and either set css properties manually like you're trying to do, or you can use add class like so:
一旦你有一个带有 class="Foo" 的元素，你就可以选择它，然后像你试图做的那样手动设置 css 属性，或者你可以像这样使用 add class：
$(".Foo").addClass('Foo');
$(".Foo").addClass('Foo');
Granted of course, since you're selecting the same class that you're adding, it doesn't really make sense.
当然，既然您选择了要添加的同一个类，那么这并没有什么意义。
回答by dekdev
I got thsi example in CSS api help in JQuery API.
我在 JQuery API 的 CSS api 帮助中得到了这个示例。
this worked for me : http://jsfiddle.net/LHwL2/
这对我有用：http: //jsfiddle.net/LHwL2/
for complete help read the css api at http://api.jquery.com/css/
如需完整帮助，请阅读http://api.jquery.com/css/ 上的 css api
回答by Shrikanth Buds
This may work for you.. $(".Foo").css("width", "40px");
这可能对你有用.. $(".Foo").css("width", "40px");
回答by JaredPar
Try using multiple styles
尝试使用多种样式
.FooSmall
{
width:20px;
}
.FooBig
{
width:40px;
}
$('#theTarget').removeClass('FooSmall').addClass('FooBig');
