Question

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

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

addDiv 创建新div并通过点击按钮“添加新div”将其附加到页面。
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>

Answer 1

我不建议即时添加或修改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);

Answer 2

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

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

Answer 3

我建议在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);
}

Answer 4

您不能直接修改在页面上或外部样式表中创建的样式元素，一种方法是使用以下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

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

4 个答案: