有没有办法根据值使用 css 插入元素的颜色？

Question

有没有一种方法，仅使用CSS，根据单元格中的值更改单元格的背景颜色？

为了说明这一点，我尝试复制 Excel 条件格式化值的效果：

如果可能的话，能够在 2 或 3 种颜色之间进行插值就太好了。

Answer 1

绝对是！

只要您可以使用 CSS 变量，就有可能有 2 或 3 个颜色渐变。

您可以使用 CSS

color-mix

和 CSS 变量来实现基于变量值的颜色混合。

使用以下 CSS：

.highlight-color {
  --min: 0;
  --max: 1;
  --incs: oklch;
  --value: 0.5;
  --high-color: #F8696B;
  --middle-color: #FFEB84;
  --low-color: #63BE7B;
}

.highlight-color .highlightme {
  /* This is where the magic happens */
  --normed: calc(100% * (var(--value) - var(--min))/(var(--max) - var(--min)));
}

.highlight-color.highlight-2color .highlightme {
  background-color: color-mix(
    in var(--incs),
    var(--high-color) var(--normed),
    var(--low-color)
  );
}

.highlight-color.highlight-3color .highlightme {
  --n1: calc((var(--normed) - 50%) * 2);
  --n2: calc(var(--normed)*2);
  background-color: color-mix(
    in var(--incs),
    color-mix(in var(--incs), var(--high-color) var(--n1), var(--middle-color)) var(--normed),
    color-mix(in var(--incs), var(--middle-color) var(--n2), var(--low-color))
  );
}

然后是以下 HTML：

<table>
    <tbody>
        <tr class="highlight-color highlight-3color" style="--min: 0; --max: 1;">
            <td class="highlightme" style="--value: 0.00;">0.00</td>
            <td class="highlightme" style="--value: 0.07;">0.07</td>
            <td class="highlightme" style="--value: 0.14;">0.14</td>
            <td class="highlightme" style="--value: 0.21;">0.21</td>
            <td class="highlightme" style="--value: 0.29;">0.29</td>
            <td class="highlightme" style="--value: 0.36;">0.36</td>
            <td class="highlightme" style="--value: 0.43;">0.43</td>
            <td class="highlightme" style="--value: 0.50;">0.50</td>
            <td class="highlightme" style="--value: 0.57;">0.57</td>
            <td class="highlightme" style="--value: 0.64;">0.64</td>
            <td class="highlightme" style="--value: 0.71;">0.71</td>
            <td class="highlightme" style="--value: 0.79;">0.79</td>
            <td class="highlightme" style="--value: 0.86;">0.86</td>
            <td class="highlightme" style="--value: 0.93;">0.93</td>
            <td class="highlightme" style="--value: 1.00;">1.00</td>
        </tr>
    </tbody>
</table>

您应该得到以下内容：

您还可以使用以下 Javascript 自动设置 CSS 值：

document.querySelectorAll('.autohighlight').forEach(el => {
    const values = [];
    const els = el.querySelectorAll('.highlightme');
    els.forEach(vel => {
        values.push(vel.innerText / 1);
        vel.style.setProperty('--value', vel.innerText / 1);
    });
    const max = Math.max(...values);
    const min = Math.min(...values);
    el.style.setProperty('--min', min);
    el.style.setProperty('--max', max);
});

您可以在此处找到一个示例代码笔来演示这一点