如何使用 JavaScript 修改 CSS 类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7667082/
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 modify a CSS class using JavaScript?
提问by Giovanni Di Milia
I know how to apply css on a single tag (or changing class on it) but THIS IS NOT WHAT I AM ASKING!
我知道如何在单个标签上应用 css（或更改它的类），但这不是我要问的！
I would like to modify an attribute within a CSS class without touching the element where the class is applied.
我想在不触及应用该类的元素的情况下修改 CSS 类中的属性。
In other words if this is the css
换句话说，如果这是 css
.myclass {
font-size: 14px;
color: #aab5f0;
}
and this is the html
这是 html
<span id="test" class="myclass"> foo bar </span>
to increase the font of the span tag I want to modify the content of the class and NOT doing something like
增加span标签的字体我想修改类的内容而不是做类似的事情
var fontsize = parseInt($('#test').css('font-size').replace(/[^-\d\.]/g, ''));
fontsize += 10;
$('#test').css('font-size', fontsize+'px');
I want that the class becomes
我希望班级变成
.myclass {
font-size: 18px;
color: #aab5f0;
}
Is there a way to change the actual class through Javascript?
有没有办法通过 Javascript 更改实际的类？
My other solution would be to put the css in a container and refill the container each time, but I have the sensation that it is not a good idea...
我的另一个解决方案是将 css 放入容器中并每次重新填充容器，但我感觉这不是一个好主意......
回答by C???
I think ideally you should define a base font size on the htmlor bodyelement. All of the other font sizes in your CSS should be relative to that "master" font size, like so:
我认为理想情况下，您应该在htmlorbody元素上定义基本字体大小。CSS 中的所有其他字体大小都应该与“主”字体大小相关，如下所示：
Then, when you adjust the font-size of the body through jQuery.css(), the other elements will all automatically adjust their size relative to the parent.
然后，当你通过 jQuery.css() 调整 body 的 font-size 时，其他元素都会相对于父元素自动调整它们的大小。
$(body).css('font-size', '14px');
You don't have to use the bodylevel, you could define base font-size a div or other container and use that as the parent instead.
您不必使用body级别，您可以将基本字体大小定义为 div 或其他容器，并将其用作父级。
Here is a contrived example of this in action:
这是一个人为的例子：
$('#grow').click(function() {
$('body').css('font-size', '18px');
});body {
font-size: 12px;
}
h3,
p {
font-size: 1.0em;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Main Title</h3>
<p> Welcome to my website. </p>
<button id="grow" type="button">Grow</button>回答by thirtydot
My comment notwithstanding, look at this question: Setting CSS pseudo-class rules from JavaScript
尽管有我的评论，请看看这个问题：从 JavaScript 设置 CSS 伪类规则
Changing a class and "setting pseudo-class rules" are achieved in the same way.
更改类和“设置伪类规则”的实现方式相同。
@Box9's answeris probably the one you should actually use:
I threw together a small library for thissince I do think there are valid use cases for manipulating stylesheets in JS.
回答by deviousdodo
There is no need to change the class itself. To override the behaviour, simply add another class to the existing one or change it entirely. I'll show the first option:
无需更改类本身。要覆盖该行为，只需向现有类添加另一个类或完全更改它。我将展示第一个选项：
.myclass {
font-size: 14px;
color: #aab5f0;
}
.myclass.override {
font-size: 12px;
}
And then all you need to do from javascript is to toggle the override class. This way it's also much better as all the presentation is done in CSS.
然后你需要从 javascript 中做的就是切换覆盖类。这样它也好得多，因为所有的演示文稿都是在 CSS 中完成的。
回答by Ryan Kinal
Since it's obvious you're using jQuery, please see the addClassand removeClassfunctions.
由于很明显您正在使用 jQuery，请参阅addClass和removeClass函数。
$('#test').removeClass('myClass').addClass('yourClass');
回答by WebsterDevelopine
looking for same thing.
寻找同样的东西。
This was my solution
这是我的解决方案
https://jsfiddle.net/sleekinteractive/0qgrz44x/2/
https://jsfiddle.net/sleekinteractive/0qgrz44x/2/
HTML
<p>The Ants in France stay mainly on the Plants</p>
CSS
p{
font-family:helvetica;
font-size:15px;
}
JAVASCRIPT (uses jQuery)
function overwrite_css(selector,properties){
// selector: String CSS Selector
// properties: Array of objects
var new_css = selector + '{';
for(i=0;i<properties.length;i++){
new_css += properties[i].prop + ':' + properties[i].value + ';';
}
new_css += '}';
$('body').append('<style>' + new_css + '</style>');
}
overwrite_css('p',Array({prop: 'font-size', value: '22px'}));
overwrite_css('p',Array({prop: 'font-size', value: '11px'}));
overwrite_css('p',Array({prop: 'font-size', value: '66px'}));
// ends on 66px after running all 3. comment out lines to see changes
回答by shox
Simply JQuery:
简单的jQuery：
$('#test').attr('class','bigFont');
or native JS :
或原生 JS ：
document.getElementById('test').className ='bigFont';
UPDATED
更新
var size = [ 10 , 20 , 30 ] ;
var i =0;
$('#test').css('font-size',size[i]+'px');
i = (i+1)%size.length ;
