使用javascript / jquery更改内联类Style属性

Question

如何使用javascript / jquery更改内联类的Style属性。 例如：

<style>
.iexp-info-bar-body {
    background-color: #000000;
}
</style>
<div class="iexp-info-bar-body">
//data
</div>

我想将类.iexp-info-bar-body＃000000的background-color属性更改为＃C04848。

请不要让我知道内联CSS技术/使用！important关键字来更改颜色。
但是我想更改类.iexp-info-bar-body属性的所有出现，即我需要一个类似的结果

<style>
.iexp-info-bar-body {
    background-color: #C04848;
}
</style>
<div class="iexp-info-bar-body">
//data

Answer 1

我有一个很好的老师，教我们换班：

• 首先，充分了解“我的初始状态是什么”和“我的最终状态是什么”确实有帮助

如果您的设计更改了并且必须实现一些过渡，这将非常有用。 而且，您将无需访问JavaScript文件即可更改任何CSS代码。

• 然后考虑冲突

今天，您只有一个元素，取决于该类，但是如果明天有10万，该怎么办？

也许尝试制作另一个类是实现您想要做的最简单的方法。

<style>
    .iexp-info-bar-body {
        background-color: #000000;
    }
    .changed {
        background-color: #ff69b4;
    }
</style>

<div class="iexp-info-bar-body">
//data
</div>

<script>
    var all = document.querySelectorAll('.iexp-info-bar-body');
    for (var i = 0, length = all.length; i < length; i++) {
        all[i].classList.remove('iexp-info-bar-body');
        all[i].classList.add('changed');
    }
</script>

当然这是非常原始的，您可以通过多种方式进行改进

Answer 2

看一下名为jss的库。 添加或修改类非常简单

jss.set('.demo', {
    'font-size': '15px',
    'color': 'red'
});

这使用标题中的样式技术来定义类似于问题中第二个代码块的类。