我如何更改待办事项列表中将来元素的css？

Question

对于我的最终项目，我们将使用phonegap插件系统制作待办事项清单。为了获得额外的荣誉，用户应该能够为设置的任务（低，中，高）的优先级选择所需的颜色。默认值在css中设置（在名为".low" ".med" ".high"的类中），并且已经设置好如果已经在表中，则可以更改任务的颜色。

尽管该第一部分有效，但是第二个问题是，以后添加的任务仍然具有默认颜色，而不是用户选择的颜色。我不确定如何更改给定优先级的所有当前和将来元素的背景颜色。

要更改的优先颜色：

<select id='colorChange`' onchange="colorSelected();">
    <option value='Low' selected>Pick Priority Colors</option>
    <option value='Low'>Low</option>
    <option value='Med'>Med</option> 
    <option value='High'>High</option>
</select>

颜色选择器：

    <input id="color" type="color">

添加新任务时的Java脚本：

if (priority == "Low")
    var style = "low";
else if (priority == "Med")
    var style = "med";
else
    var style = "high";

table.insertAdjacentHTML('beforeend',`
    <tr><td class="tg-rykj ${style}"><input type="radio" class="done"></td>
    <td class="tg-cly1 name ${style}">${txt}</td>
    <td class="dates ${style}">${date}</td>
    <td class="tg-cly1 ${style}">${priority}</td>
    <td class="tg-cly1 ${style}">${category}</td>
    <td>
        <img id="delete" src="img/delete.png" 
        onclick="this.parentNode.parentNode.parentNode.style.display = 'none'; 
        updateTable();">
    </td>
    </tr>`);

JS更改表中已有的元素：

function colorSelected () {
        var color = document.getElementById("color").value;
        var select = document.getElementById('colorChange').value;
        if (select == "Low")
            var style = document.getElementsByClassName('low');
        else if (select == "Med")
            var style = document.getElementsByClassName('med');
        else
            var style = document.getElementsByClassName('high');
        for(var i = 0; i < style.length; i++){
            style[i].style.backgroundColor = color;
        }
}

图像：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS90bks0Ti5wbmcifQ==” alt =“在此处输入图像描述”>“ >>

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9Xc3hEcy5wbmcifQ==” alt =“在此处输入图像描述”>

对于我的最终项目，我们将使用phonegap插件系统制作待办事项清单。为了获得额外的信誉，用户应该能够为设置任务的优先级选择所需的颜色（低，...

Answer 1

您可以通过在文档头添加style标签来创建新的样式表。然后，您可以向该样式表中添加新规则，始终在末尾添加以确保新规则优先于先前规则。例如，

Answer 2

我正在使用div并稍加更改即可应用您的代码，效果很好