如何用Javascript重新定义CSS类

假设我们定义了一个CSS类，该类应用于页面上的各种元素

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

人们抱怨这种颜色，说他们不喜欢粉红色/紫色。所以你想让他们能够随心所欲地改变风格，他们可以选择自己喜欢的颜色。您有一个调用Javascript函数的小颜色选择器小部件：

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

这个函数的主体是什么

其目的是，当用户在颜色选择器上选择新颜色时，所有带有

class=“coloruful”

的元素的样式都将发生更改。

类似

function changeColourful(colorRGB, backgroundColorRGB)
 {changeColor (document, colorRGB, backgroundColorRGB)}

function changeColor (node, color, changeToColor)
{
   for(var ii = 0 ; ii < node.childNodes.length; ii++)
   {
     if(node.childNodes[ii].childNodes.length > 0)
     {
        changeColor(node.childNodes[ii], color, changeToColor);
     }

      if(node[ii].style.backgroundColor == color)
      {
        node[ii].style.backgroundColor = changeToColor;
      }

   }


}

函数changecoloful（colorRGB，backgroundColorRGB）
{changeColor（文档，colorRGB，backgroundColorRGB）}
函数changeColor（节点、颜色、changeTolor）
{
对于（var ii=0；ii0）
{
changeColor（node.childNodes[ii]，color，changeToColor）；
}
if（节点[ii].style.backgroundColor==颜色）
{
节点[ii].style.backgroundColor=changeToColor；
}
}
}

我将实际实现这个服务器端；只需在他们的会话中存储用户喜欢的颜色（通过cookies或任何对您来说既好又容易的方式），并动态生成CSS，即

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

如果通过Javascript实现这一点更适合您，那么您可以使用Javascript操纵CSS。例如，见：

---

首先检查是否定义了

文档.样式表（参见@alex的回复）

如果没有，这个问题应该会有帮助：


请参阅接受答案中的链接和底部的我的回答

这只是答案的一部分。您仍然需要使用每个元素的style属性应用新值
 特定div/颜色的快速示例-可通过函数动态传入

document.getElementById('Your Div Name Here').style.background = 'white';
document.getElementById（'此处为您的Div名称'）.style.background='白色'；
或者，更改指定项的类

document.getElementById('Your Div Name Here').classname = 'newclassname'
document.getElementById（'此处为您的Div名称'）。classname='newclassname'
这是假设您可以用这种方式指定div，如果不能，那么结合使用这个方法和Kevin展示的节点循环解决方案应该可以达到这个目的
我不知道如何直接操作这个类，但是您可以有效地做同样的事情。下面是jQuery中的一个示例

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

在纯javascript中，您需要做更多的工作。
jQuery:

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

function changeColourful(colorRGB, backgroundColorRGB)
{
    $('.colourful').css({color:colorRGB,backgroundColor:backgroundColorRGB});
}

如果希望更改在页面间持久化，则必须将其存储在cookie中，并每次重新应用该函数。
我只是尝试在中使用空标记，然后动态填充它。至少在ff3中似乎有效

因此：

在中，插入如下内容：

<style id="customstyle" type="text/css"></style>

附加：

 $("#customstyle").append(".colourful { color: #345 ; }");

如果要将其保存在某个位置，只需抓取内容：

  var csscontent =  $("#customstyle").text();

。。然后您可以通过ajax将其发送回服务器。
这是一个将背景图像更改为样式表的完整示例。
第一部分找到正确的样式表。这里，我想要最后一个，它的href包含“mycss.css”。也可以使用title属性

第二部分，正确定位规则。在这里，我放置了一个标记“MYCSSRULE”，以便找到正确的规则

css.css中的css规则是：#map td，MYCSSRULE{background image:url（“img1.png”）；}

第三部分只是改变了规则

此过程不适用于internet explorer 6。（8个就可以了）。适用于Firefox3和Webkit

希望有帮助

function changeBgImg(newimage) {
  var i,n;
  var ssheets = document.styleSheets;         // all styleSheets. Find the right one
  var ssheet;

  // find the last one whose href contain "myhref"
  n = ssheets.length;
  for (i=n-1; i>=0 ;i--) {
    var thisheet = ssheets[i];
    if ( (null != thisheet.href) && (thisheet.href.indexOf("mycss.css") != -1) ) {
      ssheet = thisheet; break;
    }
  }

  if ( (null == ssheet) || ("undefined" == typeof(ssheet.cssRules))) {
    // stylesheet not found or internet explorer 6
    return;
  }

  // find the right rule
  var rule;
  n = ssheet.cssRules.length;
  for (i=0; i<n; i++) {
    var r = ssheet.cssRules.item(i);
    if (typeof(r.selectorText) == "undefined") { continue; }
    if (r.selectorText.indexOf("MYCSSRULE") != -1) {
      rule = r; break;
    }
  }

  if (null == rule) {
    // not found
    return;
  }

  rule.style.backgroundImage = "url(" + newImage + ")";
}

函数更改GIMG（新图像）{
变量i，n；
var ssheets=document.styleSheets；//所有样式表。找到正确的样式表
var-ssheet；
//查找其href包含“myhref”的最后一个
n=ssheets.length；
对于（i=n-1；i>=0；i--）{
var thisheet=表[i]；
如果（（null！=thisheet.href）&&（thisheet.href.indexOf（“mycss.css”）！=-1））{
ssheet=此页；断开；
}
}
if（（null==ssheet）| |（“未定义”==typeof（ssheet.cssRules）））{
//找不到样式表或internet explorer 6
返回；
}
//找到正确的规则
var规则；
n=ssheet.cssRules.length；
对于（i=0；ii如果您转到服务器端，请将依赖服务器的项与其他样式隔离开来，以便浏览器仍然可以缓存样式表的其余部分。您可能还需要在服务器生成的css中包含缓存中断器。非常同意-您肯定希望这是服务器端的，并且位于远离可缓存/静态css规则的路径中此对于服务器端解决方案来说，这是一个很好的答案。我曾试图将这个问题设置为一种通用的“使用javascript调整css”，这就是Edmassa获得绿色检查的原因。有人应该问这个问题。不重新加载的动态重新定义如何？：）我会支持你的。我想。classname应该是。classname。我想！这就是我要找的（虽然
'purple'
和
'red'
应该分别是
backgroundColorRGB
和
colorRGB
）我很乐意帮忙！紫色/红色的东西只是为了举例。你不会想让我做所有的工作吧？（我开玩笑。我开玩笑。）
function changeBgImg(newimage) {
  var i,n;
  var ssheets = document.styleSheets;         // all styleSheets. Find the right one
  var ssheet;

  // find the last one whose href contain "myhref"
  n = ssheets.length;
  for (i=n-1; i>=0 ;i--) {
    var thisheet = ssheets[i];
    if ( (null != thisheet.href) && (thisheet.href.indexOf("mycss.css") != -1) ) {
      ssheet = thisheet; break;
    }
  }

  if ( (null == ssheet) || ("undefined" == typeof(ssheet.cssRules))) {
    // stylesheet not found or internet explorer 6
    return;
  }

  // find the right rule
  var rule;
  n = ssheet.cssRules.length;
  for (i=0; i<n; i++) {
    var r = ssheet.cssRules.item(i);
    if (typeof(r.selectorText) == "undefined") { continue; }
    if (r.selectorText.indexOf("MYCSSRULE") != -1) {
      rule = r; break;
    }
  }

  if (null == rule) {
    // not found
    return;
  }

  rule.style.backgroundImage = "url(" + newImage + ")";
}