javascript - 如何更改待办事项列表中 future 元素的 css？

Question

对于我的最终元素，我们正在制作一个关于 phonegap 插件系统的待办事项列表。对于额外的信用，用户应该能够为设置任务的优先级(低、中、高)选择他们想要的颜色。默认值在 css 中设置(在名为 ".low"的类中)。 med"".high") 并且我已经设置好它来更改任务的颜色(如果它已经在表中)。

虽然这第一部分有效，但第二个问题是稍后添加的任务仍被赋予默认颜色，而不是用户选择的颜色。我不确定如何更改给定优先级的所有当前和 future 元素的背景颜色。

要更改的优先颜色:

<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">

添加新任务时的 Javascript:

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;
        }
}

图片:

Answer 1

您可以通过将 style 标记添加到文档头部来创建新的样式表。然后您可以向该样式表添加新规则，总是在末尾添加以确保新规则优先于以前的规则。例如，

// 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 属性来确定最后一个索引的位置。查看MDN docs了解更多信息。