0

簡単な例で問題を説明します。次のhtmlページがあります。それは簡単です。

TestDiv という名前の 1 つの CSS クラスと 2 つの 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

2

style.colorクラス スタイルをオーバーライドするインライン スタイルを作成します。クリックされたかどうかを保持するsetBlue()には、var を格納するかisBlue = false、divClass = 'blue'/'red'カラー スタイルを保持するすべての div でクラスを切り替えます。

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

于 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

ページまたは外部スタイル シートで作成されたスタイル要素を直接変更することはできません。これを行う 1 つの方法は、次の 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 に答える