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

在我的最后一个项目中，我们将使用phonegap插件系统制作一个待办事项列表。为了获得额外的积分，用户应该能够为设置任务的优先级选择他们想要的颜色（低、中、高）。默认值是在css中设置的（在名为

“.low”“.med”“.high”“的类中），如果任务已经在表中，我已经设置了它来更改任务的颜色

虽然第一部分可以工作，但第二个问题是，稍后添加的任务仍然会使用默认颜色，而不是用户选择的颜色。我不确定如何更改给定优先级的所有当前和未来元素的背景色

要更改的优先颜色：


选择优先颜色
低
医学
高

颜色选择器：



添加新任务时的Javascript：

if（优先级==“低”）
var style=“低”；
否则如果（优先级=“中等”）
var style=“med”；
其他的
var style=“高”；
表.insertAdjacentHTML（'beforeend'`
${txt}
${date}
${priority}
${category}
`);

JS要更改表中已有的元素：

选择的函数（）{
var color=document.getElementById（“color”）.value；
var select=document.getElementById（'colorChange'）。值；
如果（选择==“低”）
var style=document.getElementsByClassName（'low'）；
否则如果（选择==“中等”）
var style=document.getElementsByClassName（'med'）；
其他的
var style=document.getElementsByClassName（'high'）；
对于（变量i=0；i

图像：


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

// declare the styleSheet as a global so that a new one
// is not created every time addColor is called
let styleSheet;

function addColor(className, color) {
  // create stylesheet, if not already created
  if (!styleSheet) {
    const styleElement = document.createElement('style');
    document.head.appendChild(styleElement);
    styleSheet = styleElement.sheet;
  }

  // insert style rule at the end of the stylesheet,
  // overriding existing rules on same selector
  styleSheet.insertRule(
    `.${className} { color: ${color} }`,
    styleSheet.cssRules.length
  );
}

// callback for event listener, grabs the correct values
// and calls the `addColor` function with them
function colorSelected() {
  const color = document.getElementById('color').value;
  const selected = document.getElementById('colorChange').value;
  addColor(selected.toLowerCase(), color);
}

CSSStyleSheet.insertRule（）
接受两个参数：一个表示要添加的规则的字符串和一个用于添加该规则的索引。因为您希望它位于样式表的末尾，所以可以使用
cssRules.length
属性来确定最后一个索引的位置。有关更多信息，请参阅。
我正在进行div，并对代码进行一些更改，结果很好



.低{背景色：珊瑚}
.Med{背景色：红色}
.Heigh{背景色：绿色}
警报（“测试”）；
函数colorSelected（）{
var color=document.getElementById（“color”）.value；
警报（颜色）；
var select=document.getElementById（'colorChange'）。值；
如果（选择==“低”）
var style=document.getElementsByClassName（'low'）；
否则如果（选择==“中等”）
var style=document.getElementsByClassName（'med'）；
其他的
var style=document.getElementsByClassName（'high'）；
对于（变量i=0；i
在函数顶部，首先通过添加选择颜色，然后单击函数文档。getElementById（“颜色”）。单击（）@LDS我不确定单击
的作用是什么，但我确实重写了代码，使其具有替换原始问题中提供的
colorSelected（）
函数的全部功能。