JavaScript实现仪表盘根据数值动态改变填充颜色的问题

你的尝试代码存在几个明显问题：

• if (gaugeElement, '< 0.05') 是完全错误的条件写法，你需要判断的是传入的value参数，而非DOM元素
• 修改背景色的方式不对，#gaugecolor = color 不是有效的DOM操作语法
• 在if语句内定义函数完全没必要，逻辑可以直接整合到现有的setGaugeValue函数中

下面是两种正确的实现方式，推荐优先使用CSS类控制样式（符合样式与逻辑分离的最佳实践）：

方式一：用CSS类控制样式（推荐） #

步骤1：添加CSS样式类 #

在现有CSS代码末尾新增低油量样式：

.gauge__fill.low-fuel {
    background-color: red;
}

步骤2：更新JavaScript函数 #

在setGaugeValue里加入颜色判断逻辑，每次设置数值时自动切换样式：

const gaugeElement = document.querySelector(".gauge");

function setGaugeValue(gauge, value) {
  if (value < 0 || value > 1) {
    return;
  }

  const fillElement = gauge.querySelector(".gauge__fill");
  // 设置仪表盘旋转角度
  fillElement.style.transform = `rotate(${value / 2}turn)`;
  // 设置百分比文本
  gauge.querySelector(".gauge__cover").textContent = `${Math.round(value * 100)}%`;
  
  // 判断是否触发低油量提示
  if (value < 0.05) {
    fillElement.classList.add("low-fuel");
  } else {
    fillElement.classList.remove("low-fuel");
  }
}

setGaugeValue(gaugeElement, 0.04);

方式二：直接用JS修改行内样式（快速测试用） #

如果不想新增CSS类，也可以直接通过JS修改元素背景色：

const gaugeElement = document.querySelector(".gauge");

function setGaugeValue(gauge, value) {
  if (value < 0 || value > 1) {
    return;
  }

  const fillElement = gauge.querySelector(".gauge__fill");
  fillElement.style.transform = `rotate(${value / 2}turn)`;
  gauge.querySelector(".gauge__cover").textContent = `${Math.round(value * 100)}%`;
  
  // 直接修改背景色
  if (value < 0.05) {
    fillElement.style.backgroundColor = "red";
  } else {
    fillElement.style.backgroundColor = "#5bb62a";
  }
}

setGaugeValue(gaugeElement, 0.04);

逻辑说明 #

• 将颜色判断整合到setGaugeValue函数中，每次调用该函数设置数值时，都会自动检查并更新仪表盘颜色
• 使用CSS类的方式更易维护，后续修改颜色或添加其他样式时，只需修改CSS即可，无需改动JS逻辑
• 每次设置数值时都会重置样式状态，确保油量从低变高时，颜色能正确恢复为绿色

内容的提问来源于stack exchange，提问作者Rhys Jones