0

我通过一个简单的例子来解释这个问题。我有以下 html 页面。这很简单。

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

  1. addDiv创建新的 div 并通过单击按钮“添加新 div”将其附加到页面。
  2. setBlue是我想更改具有类TestDiv的 div 的颜色的函数，但我不知道如何。

您可以看到我编写了一些代码来更改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>
4

4 回答 4

3

我不建议即时添加或修改 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-28T13:11:22.400 回答
2

style.color创建一个覆盖类样式的内联样式。为了保留是否setBlue()已被单击存储一个 varisBlue = false或者divClass = 'blue'/'red'并在保留您的颜色样式的所有 div 上切换一个类：

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

于 2013-10-28T13:24:17.577 回答
0

我建议在该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-28T13:11:52.457 回答
0

您不能直接修改在页面或外部样式表中创建的样式元素，一种方法是使用以下 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 时，它会检查这个变量是否已经设置，如果是，它会改变样式。

示例 JSFiddle

于 2013-10-28T13:13:29.537 回答