js根据值的正负显示不同颜色

原创已于 2022-05-07 13:26:42 修改 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2021-12-23 10:56:20 首次发布

js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态展示百分比数值，并根据数值正负改变显示颜色的方法。通过解析代码片段，展示了如何结合HTML和JavaScript实现数据的动态更新及视觉效果的变化。

效果：

代码实现：

params.forEach(v => {
    const {
        marker,
        seriesName
        value,
        data: {
            rate,
            id
        }
      } = v
      var res = rate   //rate为 '30%'
      res = res.substr(0, res.length - 1)
      var color = Number(res) > 0 ? "num" : "num1" 
      str += `<div class="chart-suggests">
                 <div>
                      <span class="car-name">${ marker } ${ seriesName }</span>
                      <span class="chain">${units(value)} 环比 </span>
                      <span class="percentage ${color}">${rate} </span>
                      <span class="car-model" onclick="clickHandle(id)">钻去车款</span>
                  </div>
              </div>`
})

注意：写入标签的使用，不要直接写 color，要写成 ${color}，是变量！！！

如果 percentage选择器里面写了字体颜色，那么 color 里面的颜色不会生效！！！