有没有办法改变在浏览器中注册的CSS类

我用一个简单的例子来解释这个问题。我有以下的html页面。这很简单。有没有办法改变在浏览器中注册的CSS类

有一个名为TestDiv的CSS类和两个javascript函数。

addDiv创建新的div并通过点击按钮追加到页面 “新增格”。
setBlue是，我想改变的div的颜色有类TestDiv和功能我不知道如何。

你可以看到，我写了一些代码来改变setBlue函数内部的电流产生的div。但我不知道我该如何改变这个类，以影响在此之后由addDiv函数生成的新div。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <style> 
     .TestDiv { 
      color:red; 
     } 
    </style> 
    <script> 
     function addDiv() { 
      var newDiv = document.createElement("div") 
      newDiv.className = "TestDiv"; 
      newDiv.innerHTML = "test"; 
      document.getElementById("firstDiv").insertBefore(newDiv); 
     } 
     function setBlue() { 

      var currentDivList=document.getElementsByClassName("TestDiv"); 
      for(var i=0;i<currentDivList.length;i++){ 
       currentDivList[i].style.color = "blue"; 
      } 
      // What i can write here to change the TestDiv css class 
      // And after that, new (div)s will generate by new color(changed css class) 
     } 
    </script> 
</head> 
<body> 
    <div id="firstDiv" class="TestDiv"> 
     test 
    </div> 

    <input type="button" value="add new div" onclick="addDiv();"/> 
    <input type="button" value="change color to blue" onclick="setBlue();"/> 
</body> 
</html>

来源

2013-10-28 Mohammad Nouraein

它正常工作对我来说：HTTP：//的jsfiddle。 net/8M3xs/ – ComFreek

你想要的结果是什么。你没有正确解释你的问题 – MarsOne

我不认为你将能够改变一个页面的样式。你可能需要存储一个事实，即你有一个新的颜色，并在'addDiv（）'函数中检查它以将其设置为新添加的div。 – Nunners

我不建议增加或即时修改CSS规则，但有几种解决方案：

修改原来的CSS规则

<style id="myStyle"> 
    .TestDiv { 
     color:red; 
    } 
</style> 

... 

var myStyle = document.getElementById("myStyle"); 
myStyle.sheet.cssRules.item(0).cssText = ".TestDiv { color: blue }";

（我必须为样式标签分配一个ID，因为我无法在jsFiddle环境中使用它，应该同样可以使用document.styleSheets[0]。）

添加CSS规则，新创建的样式表（感谢pawel！）

var style = document.createElement('style'); 
document.head.appendChild(style); 
style.sheet.addRule(".TestDiv", "color: blue");

原料CSS文本添加到新创建的样式表： → jsFiddle

var sheet = document.createElement('style') 
sheet.innerHTML = ".TestDiv { color: blue }"; 
document.body.appendChild(sheet);

来源

2013-10-28 13:11:22 ComFreek

这对我来说似乎很好 – MarsOne

是否会添加新的样式标签覆盖前一个？难道它会与在同一页面上有多个类声明混淆？ – Nunners

@Nunners是的，它会'覆盖'旧的。旧的仍然存在，但浏览器只使用新的样式。这是标准的行为。 – ComFreek

我建议添加一个样式表到head部分：

function setBlue() { 
    var currentDivList=document.getElementsByClassName("TestDiv"); 
    for (var i=0; i < currentDivList.length; i++) { 
     currentDivList[i].style.color = "blue"; 
    } 

    var head = document.getElementsByTagName('head')[0]; 
    var style = document.createElement('style'); 
    style.innerHTML = ".TestDiv { color: blue; }"; 
    head.appendChild(style); 
}

来源

2013-10-28 13:11:52 matewka

为什么downvote？请人们，当你冷落他们时，尝试评论答案。 – matewka

我认为这会起作用。坦克你 –

不能直接修改已在页面上或在外部样式表创建样式元素，这样做会与下面的JavaScript的一种方式：

var newColor = ''; 

function addDiv() { 
    var newDiv = document.createElement("div") 
    newDiv.className = "TestDiv"; 
    newDiv.innerHTML = "test"; 
    document.getElementById("firstDiv").insertBefore(newDiv); 

    if (newColor != '') { 
     newDiv.style.color = newColor; 
    } 
} 

function setBlue() { 

    var currentDivList = document.getElementsByClassName("TestDiv"); 
    for (var i = 0; i < currentDivList.length; i++) { 
     currentDivList[i].style.color = "blue"; 
    } 

    newColor = 'blue'; 
}

当您单击更改颜色按钮它会将newColor变量设置为blue。然后，当你添加一个新的div时，它会检查这个变量是否已经设置，如果是的话，它会改变样式。

Example JSFiddle

来源

2013-10-28 13:13:29 Nunners

这是个好主意。但为了简单的目的。我在一个大的CSS文件上工作，并且有多个属性（颜色）。你有创造性的头脑。保护你。 –

谢谢，为了将来的参考，最好提一下你的例子是一个更大的项目的流水线版本，你很可能会得到更多关于你的问题的有用答案。 :) – Nunners

style.color创建覆盖类样式内嵌样式。为了留住是否setBlue()被点击商店VAR或者isBlue = false或divClass = 'blue'/'red'和切换上所有的div一类保留您的色彩款式：

http://jsbin.com/IdadUz/1/edit?html,css,js,output

来源

2013-10-28 13:24:17 Ben