javascript - 在 JavaScript 中间接应用 CSS

Question

当你编写真正的 CSS 时你可以这样做

.blue { color: blue; }

如果您在加载后向元素添加“blue”类，它会变成蓝色。

在 JavaScript 中你必须做类似的事情

var blue = document.getElementsByClassName('blue');
for (var i = 0; i < blue.length; i++)
     blue[i].style.setProperty('color', 'blue');

JavaScript 版本的问题是如果你这样做了

document.getElementById('someId').className += " blue";

它会有蓝色类，但它不会变成蓝色。 有没有什么方法(最好是简单的)将样式添加到选择器，而不是直接添加到带有该选择器的元素？

Answer 1

最常见的方式是定义.blue { color:blue; } 在 CSS 之前，然后通过 JS 将类添加到元素。这样样式在 CSS 中，只有类名在 JS 中，使其更加灵活，而不是在 JS 中硬编码数十个 css 键/值。