使用javascript更改CSS样式表

Question

我有以下内容：

<style>
    .el {color: blue;}
</style>

<div class="el">bla bla</div>
<div class="el">bla bla 123</div>

我需要使用 JavaScript 来更改

.el

中的颜色。 我知道 document.styleSheets 但这似乎有点粗糙，必须循环搜索我想以这种方式更改它的类。现在有没有更好（更轻松）的方法来做到这一点？类似的东西

document.stylesheets.getclass('.el').color = 'red';

谢谢。

Answer 1

您走在正确的道路上。您正在寻找的方法是

getElementsByClassName

，而不是

getClass

。它返回一个数组，然后您只需循环遍历该数组并分配新颜色即可。

var el = document.getElementsByClassName('el'),
    i;

for (i = 0; i < el.length; i += 1) {
    el[i].style.color = 'red';
}

演示

P.S.，显然，这改变了 style，而不是 stylesheet。

Answer 2

试试这个：

var elem = document.getElementsByClassName('el');
            for (var i = 0; i < elem.length; i++) {
                elem[i].style.color = '#aaaaaa';
            }

Answer 3

动态更改样式表是可能的，但没那么简单。 这是一个使用 .little PHP 和 jQuerY 的示例：

https://stackoverflow.com/a/78293807/760777