如何重构某些TD元素的着色？

Question

我正在通过声明来着色特定的TD元素：

td[style*="background-color: #ffc"], td[style*="background-color: #fb9"], 
td[style*="background-color: #bfc"], td[style*="background-color: #fcc"] {
background-color: #0d1117 !important;
}

如何重构？

Answer 1

CSS中有一个名为：is的伪级，使您删除代码重复

td:is([style*="background-color: #ffc"], [style*="background-color: #fb9"], [style*="background-color: #bfc"], [style*="background-color: #fcc"]) {
    background-color: #0d1117 !important;
}

文档： https://developer.mozilla.orgg/ en-us/doc/web/css/：is

---

或者您可以使用javascript使用 foreach ！

它的工作原理：
您有两个变量，
第一个需要一系列十六进制颜色代码。
第二个变量需要您希望将元素颜色的最终颜色。

如何使其在我的项目上工作：

1. 创建＆lt; script＆gt;标签或javascript文件。
2. 将此代码插入其中：

let colorsArray = ["ffc", "fb9", "bfc", "fcc"]; // change this line
let finalColor = "0d1117";

colorsArray.forEach((color) => {
    let tdWithColor = document.querySelectorAll(`td[style*="background-color: #${color}"]`);

    tdWithColor.forEach((element) => {
        element.style = `background-color: #${finalColor}`;
    })
});

// watch the code snippet below if you want comments

3. 将变量更改为您需要的内容。

---

带有演示的代码片段示例：

let colorsArray = ["ffc", "fb9", "bfc", "fcc"]; // change this line... don't put "#" in the beginning (js automatically adding it)
let finalColor = "0d1117"; // your final color, don't put "#" in the beginning (js automatically adding it)

/* Don't change the lines below */

/* for every color we are adding this logic below */
colorsArray.forEach((color) => {
  /* getting all the html elements with the same color */
  let tdWithColor = document.querySelectorAll(`td[style*="background-color: #${color}"]`);

  /* if there is more than one td of the same color we are coloring it too */
  tdWithColor.forEach((element) => {
    element.style = `background-color: #${finalColor}`;
  })
});

    <!-- this is only a example -->
    <table>
        <tr>
            <!-- I am creating multiple elements with the same bg color to test javascript  -->
            <td style="background-color: #ffc">FFC</td>
            <td style="background-color: #ffc">FFC</td>
            <td style="background-color: #ffc">FFC</td>

            <td style="background-color: #fb9">FB9</td>
            <td style="background-color: #fb9">FB9</td>
            <td style="background-color: #fb9">FB9</td>

            <td style="background-color: #bfc">BFC</td>
            <td style="background-color: #bfc">BFC</td>
            <td style="background-color: #bfc">BFC</td>

            <td style="background-color: #fcc">FCC</td>
            <td style="background-color: #fcc">FCC</td>
            <td style="background-color: #fcc">FCC</td>
        </tr>
    </table>