javascript - 列表颜色比例

Question

我有一个无序列表，最多可包含 10 个元素。在每个 li 中都有一个数值。我希望第一个数字为绿色，最后一个数字为黄色，并且相应地在两者之间缩放每个数字。

我很好奇这是否可以单独使用 css3 来完成，或者我是否需要 JavaScript 来计算中间值并应用它(我可能可以自己制定一个 JS 解决方案，但我不知道它是目前值得)

基本上，我会将 number-good 类(例如，绿色)替换为缩放后的值。

<ul id="dash-top-customer-list" class="tb-list">
    <li class="tb-list-item" data-dym-id="8">
        <span class="tb-list-name">OEM2</span><span class="tb-list-value number-good">$208,057</span>
    </li>
    <li class="tb-list-item" data-dym-id="13">
        <span class="tb-list-name">Potential3</span><span class="tb-list-value number-good">$206,988</span>
    </li>
    <li class="tb-list-item" data-dym-id="9">
        <span class="tb-list-name">REP1</span><span class="tb-list-value number-good">$191,029</span>
    </li>
    <li class="tb-list-item" data-dym-id="14">
        <span class="tb-list-name">Potential4</span><span class="tb-list-value number-good">$187,609</span>
    </li>
    <li class="tb-list-item" data-dym-id="15">
        <span class="tb-list-name">Potential5</span><span class="tb-list-value number-good">$183,372</span>
    </li>
</ul>

(这几乎不是必须的，这个问题比任何事情都更让人好奇——我很惊讶我找不到已经问过的相关问题(或者我的 google-fu 今天真的在 jar 头里))

Answer 1

如果您的列表正在更改，并且您想要重新计算值，您可能需要考虑 JavaScript。特别是如果你想订购 list 。这听起来很像 d3.js 的帮助，因此可能值得研究一下，因为它允许您创建色标。

JS 中的另一个选项是设置一个颜色数组，然后使用 switch 语句将颜色分配给 DOM 元素。

如果它不是动态的，那么您只需在样式表中设置 10 个颜色/类，然后为 DOM 元素指定您希望每个元素具有的类。