间接在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

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

Answer 2

见this question。您可以通过JavaScript添加<style>元素。

Answer 3

HTML

<div id="test">This will turn blue</div>
<button onclick="addClass()" >add Class </button>

Javascript

function addClass(){
    document.getElementById('test').className += 'blue';
}

CSS

.blue{
     color:blue;
}

这适用于FF IE7和Chrome。也许你的代码中还有其他东西会阻止它工作。