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'
});

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

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

2 个答案: