如何使用Javascript重新定义CSS类

Question

假设我们已经定义了一个CSS类,它正在应用于页面上的各种元素.

colourful
{
    color: #DD00DD;
    background-color: #330033;
}

人们抱怨颜色,他们不喜欢粉红色/紫色.因此,您希望让他们能够按照自己的意愿更改样式,并且可以选择自己喜欢的颜色.你有一个小的颜色选择器小部件调用Javascript函数:

function changeColourful(colorRGB, backgroundColorRGB)
{
    // answer goes here
}

这个功能的主体是什么？

目的是当用户在颜色选择器上选择新颜色时,所有元素class="colourful"都将改变其样式.

Answer 1

我实际上会实现这个服务器端; 只需在用户的会话中存储用户的首选颜色(通过cookie或任何好的和简单的方式)并动态生成CSS,即

colourful {
  color: ${userPrefs.colourfulColour};
  background-color: ${userPrefs.colourfulBackgroundColour};
} 

如果它真的更适合你通过Javascript做到这一点,你可以使用Javascript操纵CSS.例如,见:

• 微软的文档
• https://developer.mozilla.org/en/DOM/style

Answer 2

var setStyleRule = function(selector, rule) {
    var stylesheet = document.styleSheets[(document.styleSheets.length - 1)];
    if(stylesheet.addRule) {
        stylesheet.addRule(selector, rule)
    } else if(stylesheet.insertRule) {
        stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
    }
};

Answer 3

我不知道如何直接操作类，但你可以有效地做同样的事情。这是 jQuery 中的一个示例。

$('.colourful').css('background-color', 'purple').css('color','red');

在纯 JavaScript 中，您将需要做更多的工作。